Layui数据表格之间数据回填(复制数据/免查询)

  需求:从一张数据表格中选中需要的数据,点击添加按钮把选中的数据复制一份显示在另一个数据表格中。
  应用环境:选择商品销售。
  UI:
Layui数据表格之间数据回填(复制数据/免查询)_第1张图片
  功能完成思路: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的值一致的,否则无法把数据绑定上去。

你可能感兴趣的:(基础知识小结)