利用构造函数完成将数据放入layui的表格中

  表格可以有多条数据，那么它的数据就是以一个集合或者数组的来存储的。集合或数组内每个元素对应每条数据。有时候会有这样的一种需求，一个表单中录入数据，然后点击某个按钮就能把数据添加到表格中的对应单元格中。下面就是根据这个需求设计出的一个简单的界面。我要给大家分享的就是如何把录入的数据添加进入表格中。   首先需要先把表格给初始化了，初始化表格的代码我就补贴出来了。然后使用一个构造函数把拿到的数据构造一下，我们需要的就是这个构造函数对象。下面是添加按钮的方法代码：

function addCommodity(){ //获取数据 var a = $("#fromData [name='CommodityCode']").val(); var b = $("#fromData [name='CommodityName']").val(); var c = $("#fromData [name='ColorId']").val(); var d = $("#fromData [name='SizeId']").val(); var e = $("#fromData [name='tagprice']").val(); var f = $("#fromData [name='Amount']").val(); var g = $("#fromData [name='remark']").val(); //调用表格重载的方法加载数据 layuiTable.reload("tbCommodity",{ data:[new TableData(a,b,c,d,e,f,g)]//在数组中实例构造函数 }); }

  构造函数的代码：this.属性名称 属性名称要和初始化表格的field配置的值相同才能将添加上去。

function TableData(code,name,color,size,tagprice,Amount,remark){ this.CommodityCode=code; this.CommodityName=name; this.ColorName=color; this.SizeName=size; this.tagprice=tagprice; this.Amount=Amount; this.remark=remark; };

  上面那种方法比较笨拙，需要传递过个参数，还有一个方法就是获取到表单对象的json格式的数据，直接用这个来就行构造，这样就不用传递多个参数了。如：new TableData1($("#fromData").serializeJSON()) 然后构造方法要这样写：

function TableData1(obj){ this.CommodityCode=JSON.parse(obj).CommodityCode; this.CommodityName=JSON.parse(obj).CommodityName; this.ColorName=JSON.parse(obj).ColorID; this.SizeName=JSON.parse(obj).SizeID; this.tagprice=JSON.parse(obj).tagprice; this.Amount=JSON.parse(obj).Amount; this.remark=JSON.parse(obj).remark; };