Layui方法渲染Table点击按钮添加一行代码示例

Layui方法渲染表格动态添加行方案

目标：使用Layui实现点击按钮后在表格中动态添加一行数据。

解决方案：

方案1：如果表格是通过转换静态表格方式创建的，可以编写一个按钮，每次点击时手动添加一个<tr>标签。

方案2：如果表格是通过方法渲染方式创建的，可以编写一个按钮，每次点击时在加载数据时向数据对象中添加一个新的Object。

之前尝试过使用方案1来实现该功能，发现代码量极大，最困难的地方在于<tr>标签中的样式处理，特别是当表格中包含多种控件时，样式的添加非常麻烦，具体可参见相关示例链接。

最终选择使用方案2，但在实现过程中遇到了问题：添加的对象无法通过加载url来直接渲染表格。

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

发现Layui的url传值方式，数据格式必须为特定的JSON结构。


{"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方法渲染表格动态添加行方案

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

Layui方法渲染表格实现动态添加行的解决方案

Layui方法渲染表格动态添加行方案

实用工具推荐