使用layui怎么实现一个点击按钮添加一行功能

这期内容当中小编将会给大家带来有关使用layui怎么实现一个点击按钮添加一行功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

<强>解决方案:

方案1,表是用转换静态表格的方式创建的,写一个按钮,每次点击按钮,就添加一个& lt; tr>标签；

方案2、table 是用方法渲染的方式创建的，写一个button,每次点击按钮，加载数据时添加一个Object;

之前我试过用方案1 来实现该功能，发现这个方案，代码量极大，最困难的地方就是在中加样式，特别是table中有很多种控件时，样式的添加非常麻烦 ，可参见点击打开链接

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

原来的数据表格使用方法渲染的方法传的值，其数据是从url中取出，

发现layui的url传值方式，数据格式必须为：

{"code":0,"msg":"","count":4,"data":[{"colName":"ID","colNo":0,"collator":"","comments":"","dbId":1,"defVal":"","deleted":"","dispersion":0,"domainId":0,"histogram":"","isHide":"","isSerial":"F","isVirtual":"","maxVal":"","minVal":"","notNull":"T","repetRate":0,"scale":-1,"serialId":0,"tableId":1048586,"timestampT":" ","typeName":"INTEGER","varying":"F","vcolNo":0,"vertNo":0}]}

而我在reload方法中存放的data数据格式为

[{"colName":"ID1","colNo":0,"collator":"","comments":"","dbId":1,"defVal":"","deleted":"","dispersion":0,"domainId":0,"histogram":"","isHide":"","isSerial":"F","isVirtual":"","maxVal":"","minVal":"","notNull":"T","repetRate":0,"scale":-1,"serialId":0,"tableId":1048586,"timestampT":" ","typeName":"INTEGER","varying":"F","vcolNo":0,"vertNo":0}]

因此，解决方案：

1、将新增的data格式修改为url返回的格式，失败；

2、将url的返回值，以data的array格式返回，并作为变量传给data;成功。

全部方法如下：

首先：用ajax请求将数据取出存于变量，将变量赋值给table的data

 var tableData=new Array(); // 用于存放表格数据
　　. ajax({美元
　　,,,url:“$ {ctp}/TableOperate/GetColsInfo ?衰弱的=1048586,dbId=1,
　　,,,类型:“get"
　　,,,异步:假的
　　,,,数据类型:“json"
　　,,,,成功:,函数(结果){
　　,,,tableData=结果;
　　,,console.log(结果);
　　,,}
　　,,});
　　table.render ({
　　,,,elem: & # 39; # baseInfo& # 39;
　　,,,数据:tableData
　　,,,关口:,[[
　　,,{title : & # 39;序号& # 39;,类型:& # 39;数字# 39;,宽度:,20}
　　,,/*,,{:& # 39;tableId& # 39;,,,标题:& # 39;tableId& # 39;,}
　　,,,,{:& # 39;dbId& # 39;,,,,标题:& # 39;dbId& # 39;,}, */,,,,{:& # 39;colNo& # 39;,,,标题:& # 39;colNo& # 39;,,,:,真正}
　　,,,,{:& # 39;domainId& # 39;,,,标题:& # 39;domainId& # 39;,, minWidth:, 120年,模板:,& # 39;# switchTpl& # 39;,, unresize:, true }
　　,,,,{:& # 39;colName& # 39;,,,标题:& # 39;colName& # 39;,,, minWidth:, 120,,:, true ,,,,编辑:,& # 39;文本# 39;}
　　,,,,{:& # 39;typeName& # 39;,,,标题:& # 39;typeName& # 39;,, minWidth:, 120,,:, true ,模板:,& # 39;# selectTpl& # 39;}
　　,,,,{:& # 39;规模# 39;,,,标题:& # 39;规模# 39;,,,minWidth:, 80,,编辑:,& # 39;文本# 39;}
　　,,,,{:& # 39;notNull& # 39;,,,标题:& # 39;notNull& # 39;,,, minWidth:, 100年,模板:,& # 39;# switchNullTpl& # 39;,, unresize:,真正}
　　,,,]]
　　,,,页面:,{,//支持传入,laypage 组件的所有参数(某些参数除外,如:跳/elem),安康;详见文档
　　,,,布局:[& # 39;限制# 39;,,& # 39;计数# 39;,,& # 39;prev # 39;,, & # 39;页面# 39;,,& # 39;接下来,,,& # 39;跳过# 39;],//自定义分页布的局
　　咕咕叫,,,:,1,//设定初始在第,1页
　　,,,组:,1,//只显示,1,个连续页码
　　,,,第一:,false //不显示首页
　　最后,,,:,false //不显示尾页
　　,,}
　　,,,,,,函数(res,咕咕叫,,count) {
　　,,,}
　　,
　　});才能

最后,调用按钮的点击方法