layui 表格删除问题

问题描述:在表格删除时,使用 obj.del(); //删除对应行(tr)的DOM结构,并更新缓存,但是,当点击分页,再次点击回来时,数据还是显示出来的

原因:删除操作,只删除对应当前table的数据的缓存,原始的data并未删除,当点击分页,重载数据时,table数据来自原始数据,就显示出来了

更改:增加 table.reload,重载数据,并删除原始数据中当前删除的item

部分代码如下实例

//监听工具条
                    table.on('tool(coordinate)', function (obj) {
                        var data = obj.data;
                        var layEvent = obj.event;

                        if (layEvent === 'del') {
                            layer.confirm('确认删除此用户吗?', {title:"删除用户-"+data.email},function (index) {

                                $.post(urlDel, {
                                    id: data.id
                                }, function (res) {
                                    if (res.code == -1) {
                                        layer.msg(res.msg, {
                                            icon: 2
                                        });
                                    } else {
                                        obj.del();
                                        layer.close(index);
                                        table.reload('coordinate_reload',{
                                            data: datax.filter(item => {
                                                if(item.id !== obj.data.id) {
                                                    return item
                                                }
                                            })
                                        })
                                        layer.msg(res.msg, {
                                            icon: 1
                                        });
                                    }

                                })

说明:datax 是原始数据,

table.reload(ID, options)参数 ID 即为基础参数id对应的值,见:设定容器唯一ID 
参数 options 即为各项基础参数
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要删除layui表格中的行,可以使用`table.reload()`方法重新加载数据,包括删除行后的数据。具体实现步骤如下: 1. 获取表格对象和表格数据。 ```javascript var table = layui.table; var data = [{ id: 1, name: '张三', age: 18 }, { id: 2, name: '李四', age: 20 }]; ``` 2. 渲染表格。 ```javascript table.render({ elem: '#demo', cols: [[ {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'}, {fixed: 'right', title: '操作', toolbar: '#barDemo'} ]], data: data }); ``` 这里在表格的最后一列添加了一个操作栏,用于删除行。 3. 监听操作栏中的删除按钮。 ```javascript // 监听表格中的工具条 table.on('tool(demo)', function(obj){ var data = obj.data; if(obj.event === 'del'){ layer.confirm('真的删除行么?', function(index){ // 删除行 var newData = []; for(var i=0;i<data.length;i++){ if(data[i].id != obj.data.id){ newData.push(data[i]); } } table.reload('demo', {data: newData}); layer.close(index); }); } }); ``` 这里通过监听表格中的工具条,判断点击的是删除按钮,然后弹出确认框,确认后删除行。 4. 删除指定行。 ```javascript // 删除指定行 var newData = []; for(var i=0;i<data.length;i++){ if(data[i].id != 1){ newData.push(data[i]); } } table.reload('demo', {data: newData}); ``` 这里删除id为1的行,可以根据需求修改。 ### 回答2: 在layui表格删除行,需要先获取到要删除的行的索引,然后使用layui表格的API方法进行删除操作。 首先,在表格中设置一个删除按钮,绑定点击事件,并传递要删除的行的索引作为参数: ```html <table id="test"> <!-- 表格内容省略 --> <tbody> <tr> <td>1</td> <td>John</td> <td><button class="layui-btn layui-btn-danger" onclick="deleteRow(0)">删除</button></td> </tr> <tr> <td>2</td> <td>Mike</td> <td><button class="layui-btn layui-btn-danger" onclick="deleteRow(1)">删除</button></td> </tr> <!-- 更多行省略 --> </tbody> </table> ``` 然后,在JavaScript中定义一个deleteRow函数来处理删除行的逻辑: ```javascript function deleteRow(index) { layui.use('table', function(){ var table = layui.table; // 获取表格对象 var tableIns = table.render({ elem: '#test' }); // 获取当前数据表格的所有数据 var data = tableIns.config.data; // 删除指定索引的行数据 data.splice(index, 1); // 更新数据表格 tableIns.reload({ data: data }); }); } ``` 在函数中,首先获取到表格对象tableIns,然后通过config.data属性获取到当前表格中的所有数据,并使用splice方法删除指定索引的行数据。最后,调用reload方法重新加载数据,传递更新后的数据给data参数。 这样,当点击删除按钮时,对应的行数据将会被从表格删除。 ### 回答3: 在Layui表格删除行的操作是比较简单的。下面我就具体的步骤进行介绍。 首先,我们需要先获得表格实例对象,可以通过Layui提供的 table.render() 方法来实现。这个方法的参数一般是一个对象,包含了一些配置和回调函数。 在获取到表格实例对象后,我们可以使用实例对象的方法 table.on(event, callback) 来实现行的删除操作。其中,event 是事件类型,我们可以使用 "row(multiple)" 来实现行的多选删除,也可以使用 "row(single)" 来实现行的单选删除,callback 是回调函数,表示执行删除操作后的处理逻辑。 接下来,我们在回调函数中实现删除的具体逻辑。使用 table.checkStatus(id) 方法获取当前选中的行数据,返回的是一个对象,其中 data 属性包含了当前选中的行数据。然后,我们可以遍历选中的数据,获取到行对应的索引值,再通过实例对象的方法 table.trDel(index) 来删除行。 最后,为了使删除操作生效,我们还需要引入一些必要的样式和库文件,如 layui.css、layui.js 等。 这样,我们就可以使用Layui表格删除行了。需要注意的是,删除行的操作是基于实例对象进行的,所以要确保在操作前已经成功获取到表格实例对象。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值