layui框架表格操作：删除和编辑功能详解

layui.use(['form', 'layer', 'table'], function () {

    var form = layui.form,
        layer = layui.layer,
        $ = layui.jquery,
        table = layui.table;   //监听工具条
    table.on('tool(departmenList)', function (obj) {
        var data = obj.data, //获得当前行数据
            layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

        switch (layEvent) {
            case 'del':
                layer.confirm('确定删除此培训信息？', {icon: 3, title: '提示信息'}, function (index) {
                    $.post('/admin/training/delete',
                        {
                            'trainingId': data.trainingId
                        }, function (s) {
                            layer.msg(s.msg);
                        });
                    layer.close(index);
                    tableIns.reload();
                });
                break;
            case 'edit':
                xadmin.open('部门编辑', '/admin/training/edit?trainingId=' + data.trainingId, 450, 300);
                break;
            default:
                break;
        }
    });
});

这段代码使用layui框架实现了一个表格操作的功能，主要逻辑是通过监听工具条的事件，根据不同的操作类型（'del'或'edit'）执行相应的操作。

1. 删除操作

当用户点击'删除'按钮时，会触发'del'事件，此时代码会执行以下操作：

弹出一个确认框，询问用户是否确定删除该培训信息。
如果用户确认删除，则发送一个POST请求到服务器端接口'/admin/training/delete'，请求参数为'trainingId'。
服务器端处理删除逻辑后返回响应结果。
代码根据服务器端响应结果提示用户操作结果。
关闭确认框，并重新加载表格数据。

2. 编辑操作

当用户点击'编辑'按钮时，会触发'edit'事件，此时代码会执行以下操作：

弹出一个弹窗，标题为'部门编辑'，弹窗内容是从'/admin/training/edit?trainingId=' + data.trainingId获取的页面内容。
该页面中包含了一个表单，用户可以在表单中编辑对应的培训信息。

总结

这段代码清晰地展示了如何使用layui框架实现表格的删除和编辑功能，代码结构清晰，逻辑易懂，具有一定的参考价值。