layui树形表格支持非异步和异步加载

layui树形表格支持非异步和异步加载。

仓库地址:https://gitee.com/uniqid/

使用示例如下:

<div class="uui-admin-common-body uui-bg-white">
    <table id="list" class="layui-table uui-admin-table" lay-filter="list"></table>
</div>

<script type="text/html" id="toolbarList">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="expandAll">展开全部</button>
        <button class="layui-btn layui-btn-sm" lay-event="expandOne">展开一层</button>
        <button class="layui-btn layui-btn-sm" lay-event="foldAll">折叠全部</button>
        <button class="layui-btn layui-btn-sm" lay-event="foldOne">折叠一层</button>
    </div>
</script>

<script>
layui.config({
    base: '/uui/treetable-lay/module/'
}).extend({
    treetable: 'treetable-lay/treetable'
}).use(['treetable'], function () {
    var treetable = layui.treetable;

    treetable.render({
        treeColIndex: 1,
        treeSpid: 0,
        treeIdKey: 'code',
        treePidKey: 'pcode',
        treeIsLeafKey: 'isleaf',
        treeDefaultClose: false,
        treeLinkage: false,
        treeNodeAsync: true,
        elem: '#list',
        toolbar: '#toolbarList',
        url: '/admin/regions',
        method: 'post',
        parseData: parseData,
        cols: [[
            {field: 'id', title: 'ID', width:80}
            ,{field: 'name', title: '名称', width: 288}
            ,{field: 'code', title: '编码', width:168}
            ,{field: 'abbr', title: '简称', width: 100}
            ,{field: 'created_at', title: '添加时间'}
        ]]
    });

    treetable.on('toolbar(list)', function(obj){
        if(obj.event == 'expandOne'){
            treetable.expandOne('#list');
        } else if(obj.event == 'expandAll'){
            treetable.expandAll('#list');
        } else if(obj.event == 'foldOne'){
            treetable.foldOne('#list');
        } else {
            treetable.foldAll('#list');
        }
    });
});
</script>

猜你喜欢

转载自www.cnblogs.com/uniqid/p/11418666.html