关于布局实现单击按钮添加一行(呈现创建的表的方法)

目标：layui实现点击按钮添加一行

解决方案：

方案一：表格是通过转换静态表格来创建的，写一个按钮，每次点击按钮就添加一个tr标签；

方案二：通过方法渲染创建表，写一个按钮，每次点击按钮，加载数据时添加一个Object

我之前尝试用方案1实现这个功能，发现这个方案代码量巨大。最难的是给tr添加样式。尤其是表格中控件种类多的时候，添加样式非常麻烦。请参考点击打开的链接。

在选择使用方案2之后，但是遇到了，添加的对象无法通过加载url来呈现t

原始数据表使用由方法呈现的方法传递的值，其数据从url中取出。

找到了layui的url值传递方式，数据格式必须为：

{'code':0，' msg': ' '，' count':4，' data':[{'colName':'ID '，' colNo':0 '，' collator': ' '，' comments': ' '，' dbId':1，' defVal': ' '，' deleted': ' '，' distribution ' 3:0，' domainId '

[{'colName':'ID1 '，' colNo':0 '，' collator': ' '，' comments': ' '，' dbId':1 '，' defVal': ' '，' deleted': ' '，' distribution ' :0 '，' domainId':0 '，'直方图' : ' '，' isHide': ' '，' isSerial ' :

1.将新添加的数据格式修改为url返回的格式失败；

2.以数组形式返回url的返回值，并将其作为变量传递给数据；成功。

整个方法如下：

首先，使用ajax请求取出数据并将其存储在变量中，并将变量赋给表的数据

var tableData=new Array()；//用于存储表数据$。Ajax({ URL : ' $ { CTP }/table operate/getcolsinfo？tabId=1048586dbId=1 '，type:'get '，async:false，dataType:'json '，success:函数(结果){ tableData=resultconsole.log(结果)；} });table . render({ elem : ' # baseinfo '，data: tabledata，cols :[{ title 3360 ' serial number '，type :' numbers '，width : 20}/*，{field :' table id '，title:'tableId' }，{field:'dbId '，title 3: ' dbId ' } */，{ field: ' colNo '，title 333366 templet: ' # switchnulltpl '，unresize: true}]，page : {//支持传入laypage组件的所有参数(某些参数除外，如jump/elem)-请参阅文档layout: ['limit '，' count '，' prev '，' page '，' next '，' skip ']//自定义分页布局，curr 3360 1//最初设置在第1页，group 3360 1//仅显示1 first 3360 false//无第1页，last: 最后，调用按钮的click方法

//点击加号按钮时，新添一行$('#addTable ').单击(function(){ var old data=table。缓存[' BaseInfo ']；var data1={'colName':'ID2 '，' colNo':0 '，' collator': ' '，' comments': ' '，' dbId':1 '，' defVal': ' '，' deleted': ' '，' distribution ' :0，' domainId':0 '，'直方图： ' '，Ishide : ' '，Isserial : old DATa。推送(数据1)；table.reload('baseInfo '，{ data : old data })；});效果如图所示：

以上这篇关于获得实现点击按钮添加一行（方法渲染创建的表格)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。