Jquery LigerUI Tree是Jquery LigerUI()的插件之一,使用它可以快速的構建樹形菜單。呵呵 廢話不說了，直入正題，下面介紹C#結合ligerui 構造樹形菜單的兩種方法 1、ID/PID格式 JqueryLigerUI官網上的例子是這樣的： 復制代碼 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 6 <link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> 7 <script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script> 8 <script src="../../lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script> 9 <script type="text/javascript"> 10 $(function () 11 { 12 var data = []; 13 14 data.push({ id: 1, pid: 0, text: '1' }); 15 data.push({ id: 2, pid: 1, text: '1.1' }); 16 data.push({ id: 4, pid: 2, text: '1.1.2' }); 17 data.push({ id: 5, pid: 2, text: '1.1.2' }); 18 19 data.push({ id: 10, pid: 8, text: 'wefwfwfe' }); 20 data.push({ id: 11, pid: 8, text: 'wgegwgwg' }); 21 data.push({ id: 12, pid: 8, text: 'gwegwg' }); 22 23 data.push({ id: 6, pid: 2, text: '1.1.3', ischecked: true }); 24 data.push({ id: 7, pid: 2, text: '1.1.4' }); 25 data.push({ id: 8, pid: 7, text: '1.1.5' }); 26 data.push({ id: 9, pid: 7, text: '1.1.6' }); 27 28 $("#tree1").ligerTree({ 29 data:data, 30 idFieldName :'id', 31 parentIDFieldName :'pid' 32 } 33 ); 34 }); 35 </script> 36 </head> 37 <body style="padding:10px"> 38 <div style="width:200px; height:300px; margin:10px; float:left; border:1px solid #ccc; overflow:auto; "> 39 <ul id="tree1"></ul> 40 </div> 41 42 <div style="display:none"> 43 <!-- 數據統計代碼 --> 44 </div> 45 </body> 46 </html> 復制代碼 很明顯，通過研究其數據格式可以知道以下幾點 1、數據類型為Json數據 2、數據格式為{id:"0",pid:"-1",text:"0000"},其中id為節點Id,pid為數據的父節點id,text則為節點顯示名稱 這樣以來，我們就可以將自己的數據格式構造成如上所示的數據格式，下面貼出C#示例代碼 復制代碼 1 /// <summary> 2 /// 獲取節點數據集合 3 /// </summary> 4 /// <param name="organList">節點元數據，從數據庫獲得</param> 5 /// <returns>返回節點數據集合</returns> 6 public object GetNodeTreeData(IEnumerable<OrganDto> organList) { 7 StringBuilder jsonString = new StringBuilder(); 8 //開始構造樹格式 9 jsonString.Append("["); 10 //指定Id,PId創建樹 11 foreach (var item in organList) { 12 jsonString.Append("{id:\"" + item.ID + "\",pid:\"" + item.ParentID + "\",text:\"" + item.X + "(" + item.Xdm + ")\"},"); 13 } 14 //刪除字符串最後一個, 15 jsonString = jsonString.Remove(jsonString.Length - 1, 1); 16 //樹格式構造完成 17 jsonString.Append("]"); 18 return jsonString; 19 } 復制代碼 轉換完成之後，將數據作為對象返回到前台 復制代碼 /// <summary> /// 初始化樹 /// </summary> /// <param name="year">當前選中年份</param> /// <returns>返回樹節點數據</returns> public string InitTree(int? year) { List<int> organYearList = GetOrganYear(); if (year == null || year == 0) { //獲取默認年份 year = organYearList[0]; } //獲取組織機構信息 IEnumerable<OrganDto> organList = this.db.Organs. Where(p => p.AGraduateYear == year || p.AGraduateYear == 0). ToList(). Select(p => CovertEntityToDto(p)); object obj = GetNodeTreeData(organList); return obj.ToString(); } 復制代碼 這樣後台處理完成，前台就按照Jquery LigerUi的初始化樹的方法進行調用，將數據接收並初始化顯示樹 復制代碼 1 $.ajax({ 2 type: 'get', 3 url: '/Tree/InitTree?year=' + year, 4 success: function (data) { 5 //...問題 JSON.parse: expected property name or '}' 6 //var json = $.parseJSON(data); 7 8 $("#tree3").ligerTree({ 9 checkbox: false, 10 parentIcon: null, 11 childIcon: null, 12 nodeWidth: 230, 13 data: eval("(" + data + ")"), // 數據格式轉換為Json,也可使用$.parseJSON函數 14 idFieldName :'id', 15 parentIDFieldName :'pid', 16 onSelect: function (node) { 17 var date = new Date(); 18 var getRightPartOfStr = node.data.text.split('('); 19 //獲取系代碼 20 var xdm = $.trim(getRightPartOfStr[1].split(')')[0]); 21 document.getElementById('getData').value = xdm; 22 //獲取時間 23 var getYear = $('#changeYear').find('option:selected').attr('value'); 24 $.getJSON('/Tree/GetTreeNodeData', { 'Xdm': xdm, 'Year': getYear, 'tsm': date.getMilliseconds() }, function (para) { 25 $.each(para, function (i, v) { 26 document.getElementById('ID').value = v.ID; 27 document.getElementById('Xdm').value = v.Xdm; 28 document.getElementById('X').value = v.X; 29 30 //--- 不能用$，具體原因不詳 --- 31 document.getElementById("Xqc").value = v.Xqc; 32 document.getElementById("Ywm").value = v.Ywm; 33 document.getElementById("AGraduateYear").value = v.AGraduateYear; 34 document.getElementById("ParentID").value = v.ParentID; 35 }); 36 }); 37 } 38 }); 39 } 40 }); 復制代碼 大功告成，這樣樹就可以如願以償的顯示出來了。 2、Data格式/直接將所需要的格式拼接為樹的層級格式 這種方式，Jquery LigerUI官網上並沒有具體說明，但在使用url構造樹時用到了這種數據格式，經過剖析(過程省略...)，其數據格式如下： 復制代碼 1 [ 2 { text: '節點1', children: [ 3 { text: '節點1.1' }, 4 { text: '節點1.2' }, 5 { text: '節點1.3', children: [ 6 { text: '節點1.3.1' ,children: [ 7 { text: '節點1.3.1.1' }, 8 { text: '節點1.3.1.2' }] 9 }, 10 { text: '節點1.3.2' } 11 ] 12 }, 13 { text: '節點1.4' } 14 ] 15 }, 16 { text: '節點2' }, 17 { text: '節點3' }, 18 { text: '節點4' } 19 ] 復制代碼 知道了數據的格式，那我們要做的就是把自己的數據轉換(或者稱為封裝)成這種格式的數據，那我們就可以實現我們想要的樹圖了，下面我們就看一下我的實現思路 1、按照格式，拼接樹形數據。這裡使用遞歸函數 2、淨化樹形數據並返回到前台 下面我們看一下C#代碼 復制代碼 1 /// <summary> 2 /// 遞歸創建樹 3 /// </summary> 4 /// <param name="item"></param> 5 /// <param name="jsonString"></param> 6 /// <param name="organList"></param> 7 void Test(OrganDto item, StringBuilder jsonString, IEnumerable<OrganDto> organList) { 8 //判斷是否有下級節點,如果有子節點，輸出子節點 9 bool isLeaf = IsLeaf(item.ID); 10 //添加根節點 11 jsonString.Append("{text:\"" + item.X + "(" + item.Xdm + ")\""); 12 var n = organList.Where(p => p.ParentID == item.ID).Count(); 13 int temJ = 0; 14 if (isLeaf) { 15 jsonString.Append(",children:["); 16 //...輸出子節點 17 foreach (var child in organList.Where(p => p.ParentID == item.ID)) { 18 temJ++; 19 Test(child, jsonString, organList); 20 } 21 jsonString.Append("]},"); 22 23 } 24 else { 25 jsonString.Append("},"); 26 } 27 } 復制代碼 調用該函數 復制代碼 1 /// <summary> 2 /// 獲取節點數據集合 3 /// </summary> 4 /// <param name="organList">節點元數據，從數據庫獲得</param> 5 /// <returns>返回節點數據集合</returns> 6 public object GetNodeTreeData(IEnumerable<OrganDto> organList) { 7 StringBuilder jsonString = new StringBuilder(); 8 //開始構造樹格式 9 jsonString.Append("["); 10 11 foreach (var item in organList) { 12 if (item.ParentID == -1) { 13 Test(item, jsonString, organList); 14 } 15 } 16 jsonString.Append("]"); 17 //....刪除多余','號 18 string[] test = jsonString.ToString().Split(']'); 19 jsonString.Clear(); 20 foreach (var item in test) { 21 if (item != "") { 22 jsonString.Append(item.Remove(item.Length - 1, 1) + "]"); 23 } 24 } 25 26 return jsonString; 27 } 復制代碼 這樣以來，我們的C#構造的樹數據就構造完成了，下面就要接收樹數據，構造初始化顯示樹 復制代碼 1 $("#tree3").ligerTree({ 2 checkbox: false, 3 parentIcon: null, 4 childIcon: null, 5 nodeWidth: 230, 6 data: eval("(" + data + ")") // 數據格式轉換為Json,也可使用$.parseJSON函數 7 }）；
