表格事件 - 本系统文档

# 表格事件

table 模块是我们的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。尽管如此，我们仍将对其进行完善，在控制代码量和性能的前提下，不定期增加更多人性化功能。table 模块也将是 layui 重点维护的项目之一。

## 编辑

在表格编辑的情况下，我们默认推荐两种方式去执行表单编辑
 `{align: 'center', toolbar: '#tableBar',width: 160, title: "{:__('操作')}"},`  # 调用tableBar 加载表格事件

```

<script type="text/html" id="tableBar"> 
    <a class="layui-table-text" data-title="{:__('编辑')}" 
data-area="500px" data-url="#editforms" lay-event="edit"  >{:__('编辑')}</a>
    <div class="layui-divider layui-divider-vertical"></div>
    <a class="layui-table-text" data-url="{:url('/system/Jobs/del')}?id={{d.id}}" lay-event="del" >{:__('删除')}</a>
</script>
```
第二种调用方式

```

<script type="text/html" id="tableBar"> 
    <a class="layui-table-text" lay-open data-title="{:__('编辑')}" 
        data-area="762px,520px" data-url="{:url('/system/ApiAccess/edit')}?id={{d.id}}" >{:__('编辑')}</a>
    <div class="layui-divider layui-divider-vertical"></div>
    <a class="layui-table-text" data-url="{:url('/system/ApiAccess/del')}?id={{d.id}}" lay-event="del" >{:__('删除')}</a>
</script>
```
以上代码我们可以看见分别调用了lay-open 用于打开iframe嵌入层，以及使用lay-event="edit"打开页面层的使用方式，是不是极其简单。

## 删除

删除还是比较方便的，一样的表格事件，我们采用ajax的方式去处理，因为默认的表格已经监听了 `table.on(tool)` 的事件,
所以这里是不需要去使用lay-ajax属性的，如果你需要自定义访问方法，那么可以使用lay-ajax的方式，例如以下代码；

```
<button class="layui-btn layui-btn-sm icon-btn" 
    lay-ajax="" data-table="lay-tableList" data-url="{:url('/system/Recyclebin/restore')}" >
    {:__('一键还原')}
</button>
```

## 拖拽

表格拖拽我们使用的是 `soulTable` 第三方组件配合layui的table组件使用，看代码；
在表格渲染完毕后，加载soulTable组件的render方法后，进行soulTable回调方法实现！

```
// 数据表格
var isTable = table.render({
    elem: "#lay-tableList"
    ,url: tableURL
    ,page: true
    ,limit: 18
    ,cols: []
    ,rowDrag: {
        // 表格排序
        done: function(obj) {
            let ids = [];
            for (const k in obj.cache) {
                ids.push(obj.cache[k].id)
            }
            $.post("{:url('/system.archives/sort')}",{
               ids : ids
            }, function(res) {
                if (res.code == 200) {
                    layer.msg(res.msg);
                } else {
                    layer.error(res.msg);
                }
            })
        }
    }
    ,done: function(res, curr, count) {
        if (!res.data || res.code === 101) {
            $('.layui-table-page').remove();
        }
        soulTable.render(this);
    }
})
```

## 批量操作

表格批量操作适用于多选当前列表数据信息，向后端PHP提交一组ID，默认传递ID的集合，类型为数组

```
<button class="layui-btn layui-btn-sm icon-btn" 
    lay-batch="lay-tableList" data-url="{:url('/system/Recyclebin/restore')}">
    {:__('还原')}
</button>
<button class="layui-btn layui-btn-sm icon-btn" 
    lay-batch="lay-tableList" data-url="{:url('/system/Recyclebin/destroy')}" > // 这样可以直接在后端接收到ids的集合然后去做处理就可以了
    {:__('销毁')}
</button>
```

更新于 2026-08-09 14:58 阅读 2

相关问题