layui 表格怎么动态删除行数据-Layui教程-PHP中文网

layui 表格怎么动态删除行数据

看不見的法師

发布： 2025-05-02 23:21:01

原创

189人浏览过

在 layui 框架中，动态删除表格行数据可以通过以下步骤实现：1. 监听工具条事件，点击删除按钮时弹出确认框；2. 确认后使用 obj.del() 方法删除 dom 结构；3. 从数据源中移除对应数据，并使用 table.reload 方法重新渲染表格，以确保数据和 dom 结构的一致性。

layui 表格怎么动态删除行数据

在使用 Layui 框架时，动态删除表格行数据是一个常见的需求。让我们从这个问题出发，深入探讨如何实现这一功能，并分享一些实用的经验和技巧。

在 Layui 中，表格组件提供了丰富的 API 来操作表格数据。删除行数据的关键在于理解 Layui 表格的结构和事件处理机制。让我们从一个简单的例子开始，逐步深入到更复杂的场景。

首先，我们需要理解 Layui 表格的基本结构。Layui 表格通常通过 table.render 方法来初始化，数据可以通过 data 参数传入。删除行数据时，我们需要找到目标行并从数据源中移除，然后重新渲染表格。

让我们看一个简单的例子，假设我们有一个表格，用户可以通过点击按钮来删除选中的行：

// 初始化表格
table.render({
    elem: '#demo',
    cols: [[
        {field: 'id', title: 'ID', width: 80},
        {field: 'username', title: '用户名', width: 120},
        {field: 'experience', title: '积分', width: 80, sort: true},
        {field: 'sign', title: '签名'},
        {field: '操作', title: '操作', width: 150, templet: '#operationTpl'}
    ]],
    data: [
        {"id": "10001", "username": "杜甫", "experience": "93", "sign": "会当凌绝顶，一览众山小。"},
        {"id": "10002", "username": "李白", "experience": "88", "sign": "安能摧眉折腰事权贵，使我不得开心颜！"},
        {"id": "10003", "username": "王勃", "experience": "91", "sign": "海内存知己，天涯若比邻。"}
    ],
    id: 'testReload'
});

// 定义操作模板
<script type="text/html" id="operationTpl">
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
</script>

// 监听工具条事件
table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'del'){
        layer.confirm('真的删除行么', function(index){
            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
            layer.close(index);
            //向服务端发送删除指令
        });
    }
});

登录后复制

在这个例子中，我们通过 table.on 方法监听工具条事件，当用户点击删除按钮时，弹出确认框，确认后调用 obj.del() 方法删除行数据。

然而，仅仅删除 DOM 结构是不够的，我们还需要更新数据源并重新渲染表格。让我们看一个更完整的例子，展示如何动态删除行数据并更新数据源：

// 假设我们有一个全局变量存储表格数据
var tableData = [
    {"id": "10001", "username": "杜甫", "experience": "93", "sign": "会当凌绝顶，一览众山小。"},
    {"id": "10002", "username": "李白", "experience": "88", "sign": "安能摧眉折腰事权贵，使我不得开心颜！"},
    {"id": "10003", "username": "王勃", "experience": "91", "sign": "海内存知己，天涯若比邻。"}
];

// 初始化表格
table.render({
    elem: '#demo',
    cols: [[
        {field: 'id', title: 'ID', width: 80},
        {field: 'username', title: '用户名', width: 120},
        {field: 'experience', title: '积分', width: 80, sort: true},
        {field: 'sign', title: '签名'},
        {field: '操作', title: '操作', width: 150, templet: '#operationTpl'}
    ]],
    data: tableData,
    id: 'testReload'
});

// 定义操作模板
<script type="text/html" id="operationTpl">
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
</script>

// 监听工具条事件
table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'del'){
        layer.confirm('真的删除行么', function(index){
            // 从数据源中删除该行数据
            tableData = tableData.filter(function(item){
                return item.id !== data.id;
            });
            // 重新渲染表格
            table.reload('testReload', {
                data: tableData
            });
            layer.close(index);
            // 向服务端发送删除指令
            // 这里可以添加 AJAX 请求来同步删除操作
        });
    }
});

登录后复制

在这个例子中，我们不仅删除了 DOM 结构，还从 tableData 中移除了对应的数据，并通过 table.reload 方法重新渲染表格。这样，表格数据和 DOM 结构都能保持一致。

在实际应用中，我们需要注意以下几点：