表格事件

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>

第二种调用方式

<!-- // 列表工具栏 Iframe层调用 -->
<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>
最后更新时间:2022-08-21 18:27:521559
https://doc.swiftadmin.net/help/12.html