2020
12/02
19:01
你的位置:首页 > Java教程 > layui table-transfer 分页穿梭框

layui table-transfer 分页穿梭框

发布时间:2020-12-02 19:01:02

原标题:layui table-transfer 分页穿梭框

作用:

 

 

 

 

代码:

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Transfer Table穿梭框组件-基于layui</title> <link rel="stylesheet" href="layui/layui/css/layui.css"></head><body><div > <div >  <button >获取全部数据</button>  <button >获取左边数据</button>  <button >获取右边数据</button> </div> <div id="root"></div></div></body><script type="text/javascript" src='/images/loading.gif' data-original="layui/layui/layui.js"></script><script> layui.config({  base: 'layui_exts/transfer/' }).use(['transfer'], function () {  var transfer = layui.transfer, $ = layui.$;  //数据源引用无效  var data1 = [   {    id:'1',    planName:'张三',    sex:0   },   {    id:'2',    planName:'李四',    sex:0   },   {    id:'3',    planName:'王五',    sex:0   },   {    id:'4',    planName:'小赵',    sex:0   },   {    id:'5',    planName:'小赵',    sex:0   },   {    id:'6',    planName:'小赵',    sex:0   },   {    id:'7',    planName:'小赵',    sex:0   },   {    id:'8',    planName:'小赵',    sex:0   },   {    id:'9',    planName:'小赵',    sex:0   },   {    id:'10',    planName:'小赵',    sex:0   },   {    id:'11',    planName:'小赵',    sex:0   },  ];  var data2 = [];  //制表格软件下载列  var cols = [   {type: 'checkbox', fixed: 'left'},   {field: 'id', title: 'ID', width: 80, sort: true},   {field: 'name', title: '队名'},   {field: 'sex', title: '性别'}]  //制表格软件下载配置广州钢制文件柜  var tabConfig = {'page': true, 'limits': [10, 50, 100], 'height': 420}  var tb1 = transfer.render({   elem: "#root", //指定元素   cols: cols, //制表格软件下载列 支持layui数据制表格软件下载所有配置   data: [data1, data2], //[左表数据,右表数据[非必填]]   tabConfig: tabConfig //制表格软件下载配置项 支持layui数据制表格软件下载所有配置  })  //transfer.get(参数1:初始化返回值,参数2:获取数据[all,left,right,l,r],参数:指定数据字段)  //获取数据  $('.all').on('click', function () {   var data = transfer.get(tb1, 'all');   layer.msg(JSON.stringify(data))  });  $('.left').on('click', function () {   var data = transfer.get(tb1, 'left', 'id');   layer.msg(JSON.stringify(data))  });  $('.right').on('click', function () {   var data = transfer.get(tb1, 'r','');   layer.msg(JSON.stringify(data))  }); })</script></html>

原标题:layui table-transfer 分页穿梭框

基本词:

转载请保留本文网址: http://www.www.d5897.com/a/494623.html
*特别声明:以上内容来自于网络收集,著作权属原作者所有,请联系我们: admin#www.d5897.com (#换成@)。
您可能感兴趣的文章
Baidu