一、
<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: '菜单类型', 300, sort: true }, { field: 'code', title: '编码', 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=" 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"></i>添加 </button> <button id="btn_Edit" onclick="edit()" class="layui-btn layui-btn-small hbes-btn-update"> <i class="layui-icon"></i>修改 </button> <button id="btn_Delete" onclick="del()" class="layui-btn layui-btn-small layui-btn-danger"> <i class="layui-icon"></i>删除 </button> <button id="btn_SetAuth" onclick="setAuth()" class="layui-btn layui-btn-small hbes-btn-set"> <i class="layui-icon"></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); } } }
三、