zhaobao
/
scyf


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
							<!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>
        <button id="btnLog" class="layui-btn layui-btn-sm layui-btn-primary"></button>
    </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>

<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 insTb = treeTable.render({
            elem: '#demoTreeTable1',
            tree: {
                iconIndex: 1
            },
            height: 'full-150',
            cols: [
                {type: 'numbers'},
                {field: 'id', title: 'ID'},
                {field: 'name', title: 'name', width: 160},
                {
                    field: 'createTime', title: '创建时间', templet: function (d) {
                        return util.toDateString(d.createTime);
                    }, width: 180
                },
                {
                    title: '状态', templet: function (d) {
                        return d.state == 0 ? '正常' : '冻结'
                    }, width: 100
                },
                {align: 'center', toolbar: '#demoTreeTableBar1', title: '操作', width: 120}
            ],
            reqData: function (data, callback) {
                $('#btnLog').text('请求数据...');
                var startTime = new Date().getTime();
                $.get('../json/list_big1.json', function (res) {
                    $('#btnLog').text('请求数据1000条......耗时' + ((new Date().getTime() - startTime) / 1000) + 's......渲染表格......');
                    startTime = new Date().getTime();
                    callback(res.data);
                    $('#btnLog').text($('#btnLog').text() + '耗时' + ((new Date().getTime() - startTime) / 1000) + 's');
                });
            },
            style: 'margin-top:0;'
        });

        $('body').children('.page-loading').hide();
        $('body').removeClass('page-no-scroll');

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