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

表格里添加删除按钮:

html 复制代码
         , {
             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"事件:

html 复制代码
        //监听行工具事件
        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的缓存还存在这被移除的行数据,还需要移除它的缓存内容,如下:

html 复制代码
var cacheData = layui.table.cache[TableObj.tableId];//获取talbe的缓存
obj.del();//删除行
var rowIndex = obj.tr.attr("data-index"); //获取行索引
cacheData.splice(rowIndex, 1); //从缓存里删除行数据
相关推荐
m0_7482550211 分钟前
前端常用算法集合
前端·算法
真的很上进25 分钟前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web1309332039831 分钟前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2341 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1231 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~2 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语2 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport2 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg2 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww2 小时前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest