网站开发 文档,前端学到什么程度可以找到工作,物流企业网站模板下载,关于h5的网站目标#xff1a;layui 实现点击按钮添加一行解决方案#xff1a;方案1、table 是用转换静态表格的方式创建的#xff0c;写一个button#xff0c;每次点击按钮#xff0c;就添加一个 标签#xff1b;方案2、table 是用方法渲染的方式创建的#xff0c;写一个button,每次…目标layui 实现点击按钮添加一行解决方案方案1、table 是用转换静态表格的方式创建的写一个button每次点击按钮就添加一个 标签方案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的datavar tableDatanew Array(); // 用于存放表格数据$.ajax({url: ${ctp}/TableOperate/GetColsInfo?tabId1048586dbId1,type:get,async:false,dataType:json, success: function(result){tableDataresult;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 实现点击按钮添加一行(方法渲染创建的table)就是小编分享给大家的全部内容了希望能给大家一个参考也希望大家多多支持脚本之家。
