一、
<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"></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); } } }
三、