当前位置: 首页 > article >正文

layui移除(删除)table表格的一行

表格里添加删除按钮:

         , {
             field: 'wealth', width: 150, title: '操作', align: 'center', fixed: 'right',
             templet: function (item) {
                 return '<a style="margin:0px 5px; color:red; cursor: pointer;" lay-event="delete" id="DeleteTr" >删除</a>';
             }
         }

添加 “delete”事件:

        //监听行工具事件
        table.on('tool(' + TableObj.tableId + ')', function (obj) {
            var data = obj.data;       
            //添加删除行
            if (obj.event === 'delete') {
                //alert('delete');
                layer.confirm('真的删除行么', function (index) {                  
                    var cacheData = layui.table.cache[TableObj.tableId];//获取缓存
                    obj.del();//①移除这一行
                    var rowIndex = obj.tr.attr("data-index"); //获取行索引
                    cacheData.splice(rowIndex, 1);  //②彻底移除元素,从缓存里移除这一行
                    layer.close(index);//关闭弹窗
                });
            }

        });

图例:

 说明:

layui的table,光用  obj.del(); 去移除一行虽然看上去这一行没了。

但是table的缓存还存在这被移除的行数据,还需要移除它的缓存内容,如下:

var cacheData = layui.table.cache[TableObj.tableId];//获取talbe的缓存
obj.del();//删除行
var rowIndex = obj.tr.attr("data-index"); //获取行索引
cacheData.splice(rowIndex, 1); //从缓存里删除行数据


http://www.kler.cn/a/105217.html

相关文章:

  • 一键同步,无处不在的书签体验:探索多电脑Chrome书签同步插件
  • linux安装vscode vscode使用 创建项目并运行
  • vue3项目使用TypeIt打字机
  • 非侵入式负荷检测与分解:电力数据挖掘新视角
  • 期中考misc复现
  • Power BI 实现日历图,在一张图中展示天、周、月数据变化规律
  • 长连接的原理
  • Linux--进程等待
  • 光流法动目标检测
  • 网络安全—自学笔记
  • HttpClient快速入门
  • selenium模拟登录无反应
  • 电商时代,VR全景如何解决实体店难做没流量?
  • 输入/输出应用程序接口和设备驱动程序接口
  • Java学习笔记(三)
  • 使用VisualStudio生成类图结构图for高效阅读代码
  • 【LeetCode】881 救生艇 中等题
  • OPC UA:工业领域的“HTML”
  • kafka3.X基本概念和使用
  • LeetCode 面试题 16.01. 交换数字