layui表格之树形表格

layui表格之树形表格

//html部分
<table  id="demoTreeTable1" style="background-color: #00265f;"></table>

//获取表格数据后执行表格渲染函数tableFc()就阔以了.

    function tableFc(data){
        // console.log(data);
        layui.config({
            base:'./'
        }).extend({
            treeTable: 'treeTable/treeTable'
        }).use(['layer', 'util', 'treeTable'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var util = layui.util;
            var treeTable = layui.treeTable;
            // 渲染表格
            var insTb = treeTable.render({
                elem: '#demoTreeTable1',
                url:此处根据自己实际情况写地址,
                parseData: function (res) {
                    // console.log(res);
                    return {
                        "code": 0,
                        "msg": res.message,
                        "count": res.data.total,
                        "data": res.data
                    };
                },
                data: data,
                // height:300,
                tree: {
                    iconIndex: 0
                },
                cols: [
                    {field: '', title: '', width: '26%'},
                    {field: '', title: '', width: '15%'},
                    {field: '', title: '', width: '15%'},
                    {field: '', title: '', width: '10%'},
                    {field: '', title: '', width: '10%'},
                    // {field: '', title: '',hide:true},
                    {field: '', title: '', width: '10%'}
                ],
                style: 'margin-top:0;'
            });
            // 全部展开
            $('#btnExpandAll').click(function () {
                insTb.expandAll();
            });

            // 全部折叠
            $('#btnFoldAll').click(function () {
                insTb.foldAll();
            });

            $('#btnExpand').click(function () {
                insTb.expand('2');
            });

            $('#btnFold').click(function () {
                insTb.fold('2');
            });

            $('#btnChecked').click(function () {
                insTb.expand('1_1_2');
                insTb.setChecked(['1_1_2']);
            });

            $('#btnClearSearch').click(function () {
                insTb.clearFilter();
            });

            $(document).on('mouseenter', '*[lay-tips]', function () {
                layer.tips($(this).attr('lay-tips'), this, {tips: [1, '#FF5722'], time: -1});
            }).on('mouseleave', '*[lay-tips]', function () {
                layer.closeAll('tips');
            });

            setTimeout(function () {
                $('body').children('.page-loading').hide();
                $('body').removeClass('page-no-scroll');
            }, 150);

        });
    }
    ```