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); //从缓存里删除行数据
相关推荐
言兴几秒前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte4 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常5 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常7 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101810 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28117 分钟前
Chrome插件开发
前端
前端 贾公子30 分钟前
Monorepo + vite 怎么热更新
前端
coding随想39 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试