13518219792
这期内容当中小编将会给大家带来有关使用layui怎么实现一个点击按钮添加一行功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
业务包括：企业网站建设、手机网站开发、商城网站建设、网站营销推广等服务，并且涵盖域名申请、虚拟空间、云服务器、等互联网基础服务；创新互联联建站以互联网的创新理念，成熟完善的建站体系，开拓进取的精神，专业的解决方案和顾问咨询服务，帮助客户在互联网时代提升形象、把握商机、实现价值，提高企业的核心竞争力。
解决方案：
方案1、table 是用转换静态表格的方式创建的，写一个button，每次点击按钮，就添加一个
方案2、table 是用方法渲染的方式创建的，写一个button,每次点击按钮，加载数据时添加一个Object;
之前我试过用方案1 来实现该功能，发现这个方案，代码量极大，最困难的地方就是在
后选择使用方案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?tabId=1048586&dbId=1"
,type:"get"
,async:false
,dataType:"json"
, success: function(result){
tableData=result;
console.log(result);
}
});
table.render({
elem: '#baseInfo'
,data:tableData
,cols: [[
{title : '序号',type:'numbers',Width: 20}
/* ,{field:'tableId' , title:'tableId' }
,{field:'dbId' , title:'dbId' } */
,{field:'colNo' , title:'colNo' , sort: true}
,{field:'domainId' , title:'domainId', minWidth: 120, templet: '#switchTpl', unresize: true }
,{field:'colName' , title:'colName' , minWidth: 120, sort: true , edit: 'text'}
,{field:'typeName' , title:'typeName', minWidth: 120, sort: true ,templet: '#selectTpl'}
,{field:'scale' , title:'scale' , minWidth: 80, edit: 'text'}
,{field:'notNull' , title:'notNull' , minWidth: 100, templet: '#switchNullTpl', unresize: true}
]]
,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
,curr: 1 //设定初始在第 1 页
,groups: 1 //只显示 1 个连续页码
,first: false //不显示首页
,last: false //不显示尾页
}
, done: function(res, curr, count){
}
});最后，调用按钮的点击方法
//点击加号按钮时，新添一行
$("#addTable").click(function(){
var oldData = table.cache["baseInfo"];
var data1={"colName":"ID2","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};
oldData.push(data1);
table.reload('baseInfo',{
data : oldData
});
});上述就是小编为大家分享的使用layui怎么实现一个点击按钮添加一行功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。
