master

分支 (1)

管理

管理

master

layui-treetable
/
demo.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <style>
        body {
            margin: 10px auto;
            width: 1200px;
        }
    </style>
</head>
<body>
<table class="layui-table" id="demo"></table>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="create">
            <i class="layui-icon layui-icon-addition"></i>新增
        </button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="get-checked">获取选中</button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="open-all">全部展开</button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="close-all">全部关闭</button>
    </div>
</script>
<script type="text/html" id="actionBar">
    <a class="layui-btn-xs layui-font-blue" lay-event="edit">编辑</a>
    <a class="layui-btn-xs layui-font-blue" lay-event="delete">删除</a>
</script>

<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: 'js/',
    }).extend({
        treeTable: 'treeTable',
    })
    layui.use(['treeTable', 'layer'], function () {
        var layer = layui.layer,
            treeTable = layui.treeTable;
        var re = treeTable.render({
            elem: '#demo',
            url: './data/data.json',
            toolbar: '#toolbar', //开启头部工具栏，并为其绑定左侧模板
            icon_key: 'node_name',
            is_checkbox: true,
            primary_key: 'id',
            parent_key: 'parent_id',
            checked: {
                key: 'id',
                data: [26, 27, 28],
            },
            cols: [
                {key: 'node_name', title: '功能名称'}
                , {key: 'module_name', title: '模块名称', align: 'center'}
                , {key: 'control_name', title: '控制器名称', align: 'center'}
                , {key: 'action_name', title: '方法名称', align: 'center'}
                , {key: 'icon', title: '图标Icon', align: 'center'}
                , {
                    key: 'is_menu', title: '菜单显示', align: 'center',
                    template: function (item) {
                        if (item.is_menu === 1) {
                            return '隐藏';
                        } else {
                            return '<span style="color: #000;">显示</span>';
                        }
                    }
                }
                , {title: '操作', width: 180, align: 'center', tool: '#actionBar'}
            ]
        });
        //头部工具栏事件
        treeTable.on('toolbar(demo)', function (obj) {
            switch (obj.event) {
                case 'create':
                    layer.msg('添加');
                    break;
                case 'open-all':
                    treeTable.openAll(re);
                    break;
                case 'close-all':
                    treeTable.closeAll(re);
                    break;
                case 'get-checked':
                    var data = treeTable.getChecked(re);
                    layer.msg(JSON.stringify(data));
                    break;
                case 'reload':
                    treeTable.reload(re)
                    break;
                default:
                    layer.msg('缺少方法：' + obj.event);
                    break;
            }
        })
        //单元格工具栏
        treeTable.on('tool(demo)', function (obj) {
            var data = obj.data, event = obj.event;
            switch (obj.event) {
                case 'detail':
                    layer.msg(JSON.stringify(data));
                    break;
                case 'delete':
                    layer.confirm('确定删除吗？', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                    break;
                case 'edit':
                    layer.msg(JSON.stringify(data));
                    break;
                default:
                    layer.msg('未定义方法:' + event);
                    break;
            }
        })

        // 监听checkbox选择
        treeTable.on('tree(box)', function (data) {
            layer.msg(JSON.stringify(data));
        })

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