zhaobao
/
scyf


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
							<!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">
        <a href="index.html" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe65c;</i>返回
        </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",
            open: false,
            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",
            open: false,
            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",
            open: false,
            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
            },
            height: '350px',
            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;'
        });

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

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