Layui数据表格之间数据回填（复制数据/免查询）

最新推荐文章于 2024-06-28 15:08:59 发布

My f

最新推荐文章于 2024-06-28 15:08:59 发布

阅读量3.5k

点赞数

分类专栏：基础知识小结文章标签： Layui表格复制表格 Layui表格之间数据交替操作Layui数据表格

本文链接：https://blog.csdn.net/qq_41708308/article/details/95029595

版权

本文介绍如何在Layui框架下，从一个数据表格选择数据并将其复制到另一个表格中，用于商品销售场景。通过监听行点击事件，获取选中行数据，并利用Layui表格的重载方法将数据传递到目标表格，同时解决重复数据问题。实现过程中需要注意配置选中变色效果、复选框表头以及保证字段一致性。

摘要由CSDN通过智能技术生成

需求：从一张数据表格中选中需要的数据，点击添加按钮把选中的数据复制一份显示在另一个数据表格中。
应用环境：选择商品销售。
UI：
在这里插入图片描述
功能完成思路：Layui框架中的数据表格接收的数据是一个数组数据，每条数据对应数组中的一个元素。Layui提供了一系列方法可以操作表格。只需要获取到表格中选中的数据（数据数组），调用Layui的表格重载的方法把获取到的数据直接赋给另一个表格即可。下面给出代码与步骤：
1. 首先我们把表格给初始化好，我这用的是方法级渲染。加载表格模板的代码我这就不贴出来了，Layui官方文档写的在清除不过。
赋给另一个表格即可。下面给出代码与步骤：
这是弹框内部表格，外部表格和这个差不多，配置参数和数据列多一点而已：

layuiTable.render({
   
	elem : "#tbCommodityDetail",
	totalRow : true, //开启合计
	data : [], //给空数据，表示先不加载数据
	cols : [ [ //配置表头
		{
    title : '&nbsp;', type : 'numbers', totalRowText : '合计' },
		{
    title : '商品ID', field : 'commodityid', hide : true },
		{
    title : '商品明细ID', field : 'commoditydetailid',type : 'checkbox', hide : true},
		{
    title : '商品编码（条码）'