html表格动态加载勾选框,layui动态表格数据选择添加穿梭框代码

一款基于layui、vue、jQuery改写的动态表格数据选择添加穿梭框代码，测试用的json数据需要本地服务器才能运行，火狐浏览器可直接运行。

查看演示

下载资源：

41

次 下载资源

下载积分：

20

积分

js代码

var myVue = new Vue({

el: '#app',

data: {

sites: [

]

}

})

var arr = [];

layui.use('table', function () {

var table = layui.table;

table.render({

elem: '#test'

, url: 'json/filter.json'

, page: true

, cols: [[

{ type: 'checkbox', width: '13.8%' }

, { field: 'name', title: '名称', sort: true, width: '13.8%' }

, { field: 'type', title: '类型', width: '13.8%' }

, { field: 'price', title: '单价', sort: true, width: '13.8%' }

, { field: 'unit', title: '单位', width: '13.8%' }

]]

});

table.on('checkbox(test)', function (obj) {

var data = obj.data;

var sel = obj.checked;//复选框状态

var allS = obj.type;//是否全选

var msg = { name: data.name }//选中行的name值

var arr_re = JSON.stringify(arr).indexOf(JSON.stringify(msg));//判断有没有

var index;//索引值

if (sel) {

if (arr_re == -1) {

arr.push(msg)

}

myVue._data.sites = arr;

}

else {

if (arr_re != -1) {

for (var i = 0; i < arr.length; i++) {

if (arr[i].name == msg.name) {

index = i;

}

}

arr.splice(index, 1);

}

myVue._data.sites = arr;

}

//全选

if (allS == 'all') {

if (sel) {

arr = [];

for (var i = 0; i < table.cache.test.length; i++) {

var name = table.cache.test[i].name;//物品名称

arr.push({ name: name })

myVue._data.sites = arr;

}

}

else {

arr = [];

myVue._data.sites = arr;

}

}

});

});