zhaobao
/
scyf


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
							<!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 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>

<!-- 表格状态列 -->
<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 insTb = treeTable.render({
            elem: '#demoTreeTable1',
            tree: {
                iconIndex: 1,
                arrowType: 'arrow2',
                getIcon: function (d) {
                    if (d.haveChild) {
                        return '<i class="ew-tree-icon ew-tree-icon-folder"></i>';
                    } else {
                        return '<i class="ew-tree-icon ew-tree-icon-file"></i>';
                    }
                }
            },
            cols: [
                {type: 'numbers'},
                {field: 'id', title: 'ID'},
                {field: 'name', title: 'name', width: 160},
                {field: 'createTime', title: '创建时间', width: 180},
                {templet: '#demoTreeTableState1', title: '状态', width: 100},
                {align: 'center', toolbar: '#demoTreeTableBar1', title: '操作', width: 120}
            ],
            reqData: function (data, callback) {
                setTimeout(function () {  // 故意延迟一下
                    var url = '../json/list';
                    url += ((data ? ('_' + data.id) : '') + '.json');
                    $.get(url, function (res) {
                        callback(res.data);
                    });
                }, 300);
            },
            style: 'margin-top:0;'
        });

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

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