asp.net MVC中使用EasyUI Treegrid 樹形網格

引入CSS和JS

<link href="~/Content/plugins/jquery-easyui-1.7.0/themes/default/easyui.css" rel="stylesheet"> <link href="~/Content/plugins/jquery-easyui-1.7.0/themes/icon.css" rel="stylesheet"> <script src="~/Content/plugins/jquery-easyui-1.7.0/jquery.min.js"></script> <script src="~/Content/plugins/jquery-easyui-1.7.0/jquery.easyui.min.js"></script> 

前臺核心代碼

<table id="tg" class="table easyui-treegrid" title="" style="width:100%;overflow-y:auto"></table> 
<script type="text/javascript"> $(function () { //加載樹數據
 $('#tg').treegrid({ rownumbers: true, animate: false, striped: false, fitColumns: true, scrollbarSize: 0, url: "/Home/GetRootList?keywords=null", singleSelect: false, checkOnSelect: true, selectOnCheck: true, loadMsg: "正在加載數據...", method: 'get', idField: 'Id', treeField: 'TreeName', showFooter: false, columns: [[ { title: '節點名稱', field: 'TreeName', width: 380, formatter: function (value, row, index) { var drawingId = row.DrawingId; if (row.DrawingLeave==6) { return "<a title='預覽' href=\"javascript:showFile('" + row.Id + "')\">" + row.TreeName + "</a>"; } else { return row.TreeName; } } } ]], onLoadSuccess: function (row, data) { console.log(data); }, onBeforeSelect: function (row) { if (selectType == 0) { $('#tg').treegrid("unselectAll");//單選，選擇以前清除已選擇列表
                    return true; } }, onSelect: function (row) { }, onClickRow: function (row) { }, onDblClickRow: function (row) { }, onBeforeExpand: function (node) { $('#tg').treegrid('options').url = '/Home/GetChirdList?Id=' + node.Id return true; }, rowStyler: function (row, rowindex) { } }); $('#tg').treegrid('resize', { height: document.body.clientHeight - 130, }); }); </script>

 

後臺代碼

/// <summary>
/// 視圖頁 /// </summary>
/// <returns></returns>
public ActionResult Index() { return View(); } /// <summary>
/// 首次加載跟節點，此處加載1，2級；1級展開，全部二級合併 /// </summary>
/// <returns></returns>
public string GetRootList(string keywords) { var rootList = bll.GetList(keywords);//獲取全部樹形結構
   if (!string.IsNullOrEmpty(keywrods) && rootList.Count > 0) //若是搜索不爲空，需將搜索到的一級節點parentid置爲0
 { rootList[0].ParentId = 0;//搜索的結果集根節點不必定是0，此處需處理
 } var newList = rootList.Select(n => new { n.Id n.TreeName, state = n.parentId == 0 ? "open" : bll.GetAllList("parentId='" + n.Id + "'").Count > 0 ? "closed" : "open", //treeGrid關鍵字段,有子級文件夾圖標，無子級文件圖標而且沒有展開合併符號
 n.Level, _parentId = n.parentId== 0 ? null : n.parentId.ToString(),//（必須）：記得前面有「_」 ，他是用來記錄父級節點，沒有這個屬性，是無法展現父級節點 其次就是這個父級節點必須存在，否則信息也是展現不出來，在後臺遍歷組合的時候，若是父級節點不存在或爲0時，此時 _parentId 應該不賦值。若是賦值 「0」 則顯示不出來 //checked是否選中（用於複選框） //iconCls 選項前面的圖標，若是本身不設定，父級節點默認爲文件夾圖標，子級節點爲文件圖標
 }); var result = Newtonsoft.Json.JsonConvert.SerializeObject(newList); result = "{ \"total\":" + newList.Count() + ",\"rows\":" + result + "}"; return result; } /// <summary>
/// 根據選擇的Id查詢下一級節點 /// </summary>
/// <returns></returns>
public string GetChirdList(int Id) { var rootList = bll.GetChridList(Id); var newList = rootList.Select(n => new { n.Id n.TreeName, state = bll.GetAllList("parentId='" + n.Id + "'").Count > 0 ? "closed" : "open", //有子級文件夾圖標，無子級文件圖標而且沒有展開合併符號
 n.Level, _parentId = n.parentId== 0 ? null : n.parentId.ToString() }); var rows = Newtonsoft.Json.JsonConvert.SerializeObject(newList); return rows; }