layui动态添加时间控件赋值（Layui表格可编辑 可动态新增一行 删除当前行）

Layui 表格 可编辑：点击表格实现可编辑

cols: [[ //表头 {type: numbers, title: ID, width: 80, align: "center", sort: true} , {field: project, title: 项目, minWidth: 80, align: "center", edit: text} ]]

在表头的对象中增加 edit: text属性 既可编辑

新增行：当点击增加行按钮 会在表格尾部新增一行 

实现原理：

思路： 先定义一个空数组    
    
    
，用来保存已编辑过得数据及已有数据    


     


     


  ，循环该已有数据存入新数组中




 




 




 
，设置新增一行的空数据   

   

   

，最后利用Layui table.reload 重载表格 实现新增行效果！

代码实操：

//头工具栏事件 table.on(toolbar(demo), function (obj) { switch (obj.event) {         //add 既是我的按钮上 lay-event="add" 的值 case add:         //定义一个空数组 dataBak ,用来保存已编辑过得数据及已有数据 var dataBak = [];         //获取之前的数据 able.cache.titleId; titleId 就是该表格ID var tableBak = table.cache.titleId;         // for 循环之前的数组 for (var i = 0; i < tableBak.length; i++) {         //将之前的数据保存到 空数组中 dataBak.push(tableBak[i]); } //空数组被插入在dataBak尾部 此时数据已新增 dataBak.push({ "project": "" , "Gender": "" , "grade": "" , "achievement": "" , "score": "" , "grades": "" }); table.reload("titleId", {         // 将新数据 dataBak 重新载入ID为 titleId 的表格 实现新增一行效果 data: dataBak }) break; } });

删除当前行：删除对应的行 及数据

实现原理：

通过事件监听到该行tr 拿到他的index属性 拿到当前行的ID值     

     

     

 ，判断他是否有ID  有ID 既 是已有的数据 通过ajax 发送ID 给后台删除该条数据 成功无需刷新 同时页面也通过它的index值删除该条数据 并且通过 table.reload重载该表格 （重载该表格非常重要




  




  




  ，否则通过index删除的数据不再精准）

//监听行工具事件 table.on(tool(demo), function (obj) {  // 获取当前行 var tr = obj.tr; //拿到该行ID deleteId var deleteId = obj.data.id; //通过tr 下的selector属性 拿到.layui-table-body tr[data-index="2"] var myString = tr.selector // 通过空格 进行切割拿到第二个值tr[data-index="2"] let subString = myString.slice(myString.indexOf() + 1)         // 获取表格总数据 titleId 为表格ID var tableBak = table.cache.titleId ; if (obj.event === del) {//删除事件 if (deleteId === ) { layer.msg(请选择数据!); } else { layer.confirm(确定删除选中数据吗?, { btn: [确认, 取消], offset: 100px }, function () { //判断是否是已有的表格数据 是就通过AJAX 发送它的ID 删除后台的数据 if (deleteId) { $.ajax({ type: post, url: /OpenTeacher/delete, data: { id: deleteId }, success: function (res) { if (res.flag) { layer.msg(res.msg, {icon: 6}); // $(".layui-laypage-btn")[0].click(); //刷新数据 } else { layer.msg(res.msg, {icon: 5}); } } }) } // 删除掉点击的当前行 $(.layui-table tbody).find(subString).remove() // 当超过10行时
  


  


  


，应取得两位数（不考虑百行的情况） if (subString.length > 18) { arrIndex = subString.substring(15, 17) } else { arrIndex = subString.substring(15, 16) } // 删除对应 index里数组的数据 tableBak.splice(arrIndex, 1);                 // 将新数据重新载入表格 table.reload("testReload", { data: tableBak }) layer.closeAll(); }, function () { layer.closeAll(); }) } } });