zhaobao
/
scyf


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layui树形表格2.x演示</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="demo.css">
</head>
<body class="page-no-scroll">

<div class="page-wrapper">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>Layui树形表格2.x演示</legend>
    </fieldset>
    <div class="layui-btn-container" style="display: inline-block;">
        <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe668;</i>展开全部
        </button>
        <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe66b;</i>折叠全部
        </button>
        <button id="btnExpand" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe625;</i>展开2
        </button>
        <button id="btnFold" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe623;</i>折叠2
        </button>
        <button id="btnChecked" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe605;</i>勾选1_1_2
        </button>
    </div>
    <input class="layui-input" id="edtSearch" value="1_1_2" placeholder="输入关键字"
           style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
    <div class="layui-btn-container" style="display: inline-block;">
        <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe615;</i>搜索
        </button>
        <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#x1006;</i>清除搜索
        </button>
    </div>
    <div class="layui-btn-container" style="display: inline-block;">
        <a href="async.html" class="layui-btn layui-btn-sm layui-btn-primary" lay-tips="千呼万唤始出来~"
           style="position: relative;">
            <i class="layui-icon">&#xe64d;</i>异步加载&nbsp;&nbsp;
            <span class="layui-badge-dot" style="position: absolute;right: 3px;top: 3px;"></span>
        </a>
        <a href="fixed.html" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe62d;</i>固定表头
        </a>
        <a href="edit.html" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe642;</i>单元格编辑
        </a>
        <a href="icon.html" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe639;</i>自定义图标
        </a>
        <a href="big.html" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe62c;</i>数据量测试
        </a>
        <a href="../demo1x/index.html" class="layui-btn layui-btn-sm layui-btn-primary" target="_blank">
            回顾1.x
        </a>
        <a href="https://whvse.gitee.io/treetable/" class="layui-btn layui-btn-sm layui-btn-primary" target="_blank">
            bom表格
        </a>
    </div>

    <table id="demoTreeTable1"></table>
</div>

<div class="right-desc">
    <div class="layui-text desc-item">
        treeTable时隔一年进行了彻底重构，不再基于数据表格table，从零开始，
        实现了数据表格的大部分功能，在使用方法上与数据表格一致，
        并且支持懒加载、复选框联动、折叠状态记忆等功能，
        <a href="https://gitee.com/whvse/treetable-lay" target="_blank">码云下载</a>。
    </div>
    <div class="layui-text desc-item" style="padding: 0;overflow: hidden;">
        <img src="https://s2.ax1x.com/2019/08/23/msiO78.png" width="100%"/>
        <div style="padding: 5px 10px;">
            EasyWeb管理系统模板
            <a href="https://demo.easyweb.vip/iframe/" style="float: right;" target="_blank">前往查看</a>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="demoTreeTableBar1">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 表格状态列 -->
<script type="text/html" id="demoTreeTableState1">
    <input type="checkbox" lay-filter="ckState" value="{{d.id}}" lay-skin="switch"
           lay-text="正常|锁定" {{d.state==0?'checked':''}}/>
</script>

<div class="page-loading">
    <div class="ball-loader sm">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<script src="layui/layui.js"></script>
<script>
    layui.config({
        base: '../module/'
    }).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 data = [{
            id: "1",
            name: "xxx",
            state: 0,
            createTime: "2019/11/18 10:44:00",
            children: [{
                id: "1_1",
                name: "xxx",
                state: 0,
                createTime: "2019/11/18 10:44:00",
                children: [{
                    id: "1_1_1",
                    name: "xxx",
                    state: 0,
                    createTime: "2019/11/18 10:44:00",
                    children: []
                }, {
                    id: "1_1_2",
                    name: "xxx",
                    state: 0,
                    createTime: "2019/11/18 10:44:00",
                    children: []
                }, {
                    id: "1_1_3",
                    name: "xxx",
                    state: 0,
                    createTime: "2019/11/18 10:44:00",
                    children: []
                }]
            }, {
                id: "1_2",
                name: "xxx",
                state: 0,
                createTime: "2019/11/18 10:44:00",
                children: [{
                    id: "1_2_1",
                    name: "xxx",
                    state: 0,
                    createTime: "2019/11/18 10:44:00",
                    children: []
                }, {
                    id: "1_2_2",
                    name: "xxx",
                    state: 0,
                    createTime: "2019/11/18 10:44:00",
                    children: []
                }, {
                    id: "1_2_3",
                    name: "xxx",
                    state: 0,
                    createTime: "2019/11/18 10:44:00",
                    children: []
                }]
            }, {
                id: "1_3",
                name: "xxx",
                state: 0,
                createTime: "2019/11/18 10:44:00",
                children: []
            }]
        }, {
            id: "2",
            name: "xxx",
            state: 0,
            createTime: "2019/11/18 10:44:00",
            children: [{
                id: "2_1",
                name: "xxx",
                state: 0,
                createTime: "2019/11/18 10:44:00",
                children: [{
                    id: "2_1_1",
                    name: "xxx",
                    state: 0,
                    createTime: "2019/11/18 10:44:00",
                    children: []
                }, {
                    id: "2_1_2",
                    name: "xxx",
                    state: 0,
                    createTime: "2019/11/18 10:44:00",
                    children: []
                }, {
                    id: "2_1_3",
                    name: "xxx",
                    state: 0,
                    createTime: "2019/11/18 10:44:00",
                    children: []
                }]
            }, {
                id: "2_2",
                name: "xxx",
                state: 0,
                createTime: "2019/11/18 10:44:00",
                children: []
            }, {
                id: "2_3",
                name: "xxx",
                state: 0,
                createTime: "2019/11/18 10:44:00",
                children: []
            }]
        }, {
            id: "3",
            name: "xxx",
            state: 0,
            createTime: "2019/11/18 10:44:00",
            children: [{
                id: "3_1",
                name: "xxx",
                state: 0,
                createTime: "2019/11/18 10:44:00",
                children: []
            }, {
                id: "3_2",
                name: "xxx",
                state: 0,
                createTime: "2019/11/18 10:44:00",
                children: []
            }, {
                id: "3_3",
                name: "xxx",
                state: 0,
                createTime: "2019/11/18 10:44:00",
                children: []
            }]
        }, {
            id: "4",
            name: "xxx",
            state: 0,
            createTime: "2019/11/18 10:44:00",
            children: []
        }, {
            id: "5",
            name: "xxx",
            state: 0,
            createTime: "2019/11/18 10:44:00",
            children: []
        }];

        // 渲染表格
        var insTb = treeTable.render({
            elem: '#demoTreeTable1',
            data: data,
            tree: {
                iconIndex: 2
            },
            cols: [
                {type: 'numbers'},
                {type: 'checkbox'},
                {field: 'id', title: 'ID'},
                {field: 'name', title: 'name', width: 160},
                {
                    field: 'createTime', title: '创建时间', templet: function (d) {
                        return util.toDateString(d.createTime);
                    }, width: 180
                },
                {templet: '#demoTreeTableState1', title: '状态', width: 100},
                {align: 'center', toolbar: '#demoTreeTableBar1', title: '操作', width: 120}
            ],
            style: 'margin-top:0;'
        });

        treeTable.on('tool(demoTreeTable1)', function (obj) {
            var event = obj.event;
            if (event == 'del') {
                layer.msg('点击了删除', {icon: 1});
            } else if (event == 'edit') {
                layer.msg('点击了修改', {icon: 1});
            }
        });

        // 全部展开
        $('#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']);
        });

        $('#btnSearch').click(function () {
            var keywords = $('#edtSearch').val();
            if (keywords) {
                insTb.filterData(keywords);
            } else {
                insTb.clearFilter();
            }
        });

        $('#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);

    });
</script>
</body>
</html>