需求:从一张数据表格中选中需要的数据,点击添加按钮把选中的数据复制一份显示在另一个数据表格中。
应用环境:选择商品销售。
UI:
功能完成思路:Layui框架中的数据表格接收的数据是一个数组数据,每条数据对应数组中的一个元素。Layui提供了一系列方法可以操作表格。只需要获取到表格中选中的数据(数据数组),调用Layui的表格重载的方法把获取到的数据直接赋给另一个表格即可。下面给出代码与步骤:
1. 首先我们把表格给初始化好,我这用的是方法级渲染。加载表格模板的代码我这就不贴出来了,Layui官方文档写的在清除不过。
赋给另一个表格即可。下面给出代码与步骤:
这是弹框内部表格,外部表格和这个差不多,配置参数和数据列多一点而已:
layuiTable.render({
elem : "#tbCommodityDetail",
totalRow : true, //开启合计
data : [], //给空数据,表示先不加载数据
cols : [ [ //配置表头
{ title : ' ', type : 'numbers', totalRowText : '合计' },
{ title : '商品ID', field : 'commodityid', hide : true },
{ title : '商品明细ID', field : 'commoditydetailid',type : 'checkbox', hide : true},
{ title : '商品编码(条码)', field : 'commoditycode', align : 'center', sort : true },
{ title : '商品名称', field : 'commodityname', align : 'center', sort : true },
{ title : '款号', field : 'commoditystylenumber', align : 'center', sort : true },
{ title : '颜色', field : 'colorname', align : 'center', sort : true },
{ title : '尺码', field : 'sizename', align : 'center', sort : true },
{ title : '库存数', field : 'amount', align : 'center', totalRow : true, sort : true },
{ title : '吊牌价', field : 'tagprice', align : 'center', sort : true }
]],
id : "tbCommodityDetail",
height : 'full-500',
});
注意:一定要加上一个复选框类型的表头,以及配置监听点击行勾上复选框的事件,否则无法获取到选中行。
配置行点击事件以及选中变色的效果:
layuiTable.on('row(tbCommodityDetail)', function(obj) {
obj.tr.find('div.layui-unselect.layui-form-checkbox')[0].click();//点击选中/取消复选框
});
layuiTable.on('checkbox(tbCommodityDetail)', function(obj) {
if(obj.checked){
obj.tr.addClass('layui-bg-blue');// 添加选中样式
}else {
obj.tr.removeClass('layui-bg-blue');// 移除选中样式
}
});
2.获取选中行,调用表格重载的方法把选中行的数据赋给外部的表格,这里需要说一下,因为直接赋选中的数据的话那么每次选多少数据就加载出多少数据,不能说我想在这个基础上加一条或多条,所以需要用到一个全局的变量去接收选中的数据,然后再到表格重载的时候把这个全局变量赋给它,这样又会出现一个问题,那就是使用全局变量会导致可以添加重复的数据,简单,使用循环判断重复的不添加即可。
var tableData=[];//定义全局数组变量
function tableLoad(){
var checkData = layuiTable.checkStatus('tbCommodityDetail'); //获取选中行
if(tableData.length > 0){//判断全局数组是否有数据
for(var i = 0; i < checkData.data.length; i++){//循环选中每条的数据
var states = false;//定义重复状态
for(var y = 0; y < tableData.length; y++){//循环全局数组数据
if(checkData.data[i].commoditydetailid == tableData[y].commoditydetailid){
states = true;//有重复改变重复状态为真
}
}
if(!states){//判断不重复则将选中的数据插入全局数组中
tableData.push(checkData.data[i]);
}
}
} else {//全局数组变量没有数据则直接把选中的数据赋给它
tableData = checkData.data;
}
layuiTable.reload("tbCommodity",{//表格重载
data : tableData,//把全局数组变量赋给data配置项
});
};
注意:表格初始化时表头配置一定要保证field的值一致的,否则无法把数据绑定上去。