layui树形结构

最新推荐文章于 2023-07-12 10:34:24 发布

.NET跨平台

最新推荐文章于 2023-07-12 10:34:24 发布

阅读量542

点赞数

分类专栏： layui 文章标签： layui javascript 前端

原文链接：https://blog.csdn.net/WuLex

版权

layui 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

一、

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

二、C#后台代码

1.创建树形实体

 /// <summary>
    /// 树形结构实体
    /// </summary>
    public class LayUITreeEntity
    {
        //==================================公共参数=========================================
        /// <summary>
        /// 节点名称
        /// </summary>
        public string title { get; set; }
        /// <summary>
        /// 是否展开状态（默认false）
        /// </summary>
        public bool spread { get; set; }
        /// <summary>
        /// 子节点
        /// </summary>
        public List<LayUITreeEntity> children { get; set; }

        //==================================自定义参数=========================================
        /// <summary>
        /// 编码
        /// </summary>
        public string code { get; set; }
        /// <summary> 
        /// 父集编码
        /// </summary>
        public string parentCode { get; set; }
        /// <summary>
        /// id主键
        /// </summary>
        public System.Guid id { get; set; }
    }

（递归）取数据集：

/// <summary>
/// 获取树形结构数据
/// </summary>
/// <returns></returns>
public ActionResult GetTreeData()
{
    var menuList = db.Set<MenuInfo>().Select(p => new { p.id, p.code, p.parentCode, p.funName, p.sort }).OrderBy(p => p.sort).ToList();
    List<LayUITreeEntity> treeList = new List<LayUITreeEntity>();
    LayUITreeEntity model = null;
    foreach (var item in menuList)
    {
        model = new LayUITreeEntity();
        model.id = item.id;
        model.code = item.code;
        model.parentCode = item.parentCode;
        model.title = item.funName;
        model.spread = true;
        //加入集合
        treeList.Add(model);
    }
    List<LayUITreeEntity> treeResultList = OperationParentData(treeList, "00");//父集code默认为u“00”
    return Json(treeResultList, JsonRequestBehavior.AllowGet);
}
/// <summary>
/// 公用递归(处理递归最父级数据)
/// </summary>
/// <param name="treeDataList">树形列表数据</param>
/// <param name="parentId">父级Id</param>
/// <returns></returns>
public List<LayUITreeEntity> OperationParentData(List<LayUITreeEntity> treeDataList, string parentCode)
{
    var data = treeDataList.Where(x => x.code == parentCode);
    List<LayUITreeEntity> list = new List<LayUITreeEntity>();
    foreach (var item in data)
    {
        OperationChildData(treeDataList, item);
        list.Add(item);
    }
    return list;
}
/// <summary>
/// 公用递归(递归子级数据)
/// </summary>
/// <param name="treeDataList">树形列表数据</param>
/// <param name="parentItem">父级model</param>
public void OperationChildData(List<LayUITreeEntity> treeDataList, LayUITreeEntity parentItem)
{
    var subItems = treeDataList.Where(ee => ee.parentCode == parentItem.code).ToList();
    if (subItems.Count != 0)
    {
        parentItem.children = new List<LayUITreeEntity>();
        parentItem.children.AddRange(subItems);
        foreach (var subItem in subItems)
        {
            OperationChildData(treeDataList, subItem);
        }
    }
}