layui树形结构 - 爱码网

一、
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MenuList</title>
    <link href="~/Content/lib/layui/css/layui.css" rel="stylesheet" />
    <style>
        .page-container {
            margin: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1;
            overflow: auto;
        }

        .page-search {
            text-align: center;
        }

        .page-toolbar {
            border: 1px solid #eee;
            background-color: rgb(245, 250, 254);
            padding: 3px;
        }

    </style>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Content/lib/layui/layui.js"></script>
    <script>
        layui.use(['tree', 'util','table'], function () {
            var tree = layui.tree, layer = layui.layer, util = layui.util, table = layui.table, $ = layui.jquery;
            //菜单树
            tree.render({
                elem: '#roleTree',
                data: getTreeData(),
                id: 'demoId1',
                onlyIconControl: true,  //展开只能点右侧图标
                accordion: true,        //是否开启手风琴模式
                click: function (obj) {
                    var data = obj.data;  //获取当前点击的节点数据
                    table.reload('gridtable', {
                        url: "/Menu/GetGridData",
                        where: { code: data.code },
                        page: { curr: 1 }
                    });
                }
            });
            //数据表格
            table.render({
                elem: '#gridtable',
                id: 'gridtable',
                url: '/Menu/GetGridData', //数据接口
                page: true, //开启分页
                cols: [[ //表头
                    { field: '', title: '序号', type: 'numbers', align: 'center' },
                    { field: 'funName', title: '菜单名称', sort: true },
                    { field: 'type', title: '菜单类型', width: 300, sort: true },
                    { field: 'code', title: '编码', width: 300, sort: true},
                    { field: 'parentCode', title: '父级编码' },
                    { field: 'funUrl', title: '路径' },
                    { field: 'sort', title: '排序' }
                ]]
            });
            //获取树形结构数据源
            function getTreeData() {
                var data = [];
                $.ajax({
                    url: "/Menu/GetTreeData",    //后台数据请求地址
                    type: "post",
                    async: false,
                    success: function (resut) {
                        data = resut;
                    }
                });
                return data;
            }

        })
    </script>
</head>
<body>
    <div id="page-content">
        <div style="width: 200px; position:absolute; height: 100%;border-right: 1px solid #eee; background-color: #f5f5f5; overflow: auto;">
           <div id="roleTree"></div>
        </div>
        <div class="page-container" style="margin:0px; padding:0px;  left:203px;">

            <div class="page-toolbar">
                <button id="btn_Add" onclick="add()" class="layui-btn layui-btn-small">
                    <i class="layui-icon">&#xe608;</i>添加
                </button>

                <button id="btn_Edit" onclick="edit()" class="layui-btn layui-btn-small  hbes-btn-update">
                    <i class="layui-icon">&#xe642;</i>修改
                </button>
                <button id="btn_Delete" onclick="del()" class="layui-btn layui-btn-small  layui-btn-danger">
                    <i class="layui-icon">&#xe640;</i>删除
                </button>

                <button id="btn_SetAuth" onclick="setAuth()" class="layui-btn layui-btn-small hbes-btn-set">
                    <i class="layui-icon">&#xe620;</i>权限设置
                </button>
            </div>

            <!-- 展示数据表格 -->
            <table class="layui-hide" id="gridtable" lay-filter="gridtable"></table>

        </div>
    </div>
</body>
</html>
View Code