最近在了解mvc+jQuery+EasyUI 開發web應用程序，使用EasyUI 的Tree 樹形控件全動態生成無限級Tree的時候，不知道具體怎么實現，首先想到的遞歸函數，花了一段弄了個demo,實現方法具體如下：
1，首先寫了一個輔助的Model（CityEasyTree EasyUI Tree需要的的數據格式要符合json。標明 EasyUI Tree的API 中常用屬性）
1 public class CityEasyTree 2 { 3 /// <summary> 4 /// id 5 /// </summary> 6 public int id { get; set; } 7 /// <summary> 8 /// 節點名稱 9 /// </summary> 10 public string text { get; set; } 11 /// <summary> 12 /// 是否展開 13 /// </summary> 14 public string state { get; set; } 15 /// <summary> 16 /// 圖標 17 /// </summary> 18 public string iconCls { get; set; } 19 /// <summary> 20 /// 子節點集合 21 /// </summary> 22 public List<CityEasyTree> children { get; set; } 23 public CityEasyTree( ) 24 { 25 this.state = "open"; 26 this.children = new List<CityEasyTree>(); 27 } 28 /// <summary> 29 /// 常用構造函數 30 /// </summary> 31 public CityEasyTree(string id, string text, string iconCls = "", string state = "open", List<CityEasyTree> listChildren =null) 32 : this() 33 { 34 this.id =int.Parse(id); 35 this.text = text; 36 this.state = state; 37 this.iconCls = iconCls; 38 this.children = listChildren; 39 } 40 /// <summary> 41 /// 常用構造函數 42 /// </summary> 43 public CityEasyTree(int id, string text, string iconCls = "", string state = "open") 44 : this() 45 { 46 this.id = id; 47 this.text = text; 48 this.state = state; 49 this.iconCls = iconCls; 50 } 51 }
CityEasyTree 說明：一個簡單的實現（沒有實現attributes，url）
-
id：節點ID，對加載遠程數據很重要。
-
text：顯示節點文本。
-
state：節點狀態，'open' 或 'closed'，默認：'open'。在設置為'closed'的時候，當前節點的子節點將會從遠程服務器加載他們。
-
attributes: 被添加到節點的自定義屬性。（Url屬性就在這個里面，用Dictionary可以方便的擴展attribute。）
-
children: 一個節點數組聲明了若干節點。（這個是子節點，它擁有所有的父節點屬性）
符合Tree 的json數據格式查看EasyuI API （ 官網文檔:http://www.jeasyui.net/plugins/185.html ）
2，從數據庫得到的DataTable轉成成EasyUI所需要的對象結合，下面也是本文的核心代碼。
/// <summary> /// 獲取父節點 /// </summary> /// <param name="parentId"></param> /// <returns></returns> public List<CityEasyTree> GetTreeParentList(int parentId) { List<CityEasyTree> treeParentNodeList = new List<CityEasyTree>(); //從數據庫獲取相應數據 List<City> list = new CityBLL().GetCityByParentId(parentId); foreach (City info in list) { string infoName = info.CityName; treeParentNodeList.Add(new CityEasyTree(info.PkId.ToString(), info.CityName, "open", "icon-user", GetTreeChildNodeList(info.PkId))); } return treeParentNodeList; } /// <summary> /// 獲取所有的子節點（遞歸） /// </summary> /// <param name="parentId"></param> /// <returns></returns> public List<CityEasyTree> GetTreeChildNodeList(int parentId) { List<CityEasyTree> treeChildNodeList = new List<CityEasyTree>(); //從數據庫獲取相應數據 List<City> list = new CityBLL().GetCityByParentId(parentId); foreach (City info in list) { string infoName = info.CityName; treeChildNodeList.Add(new CityEasyTree(info.PkId.ToString(), info.CityName, "open", "icon-user", GetTreeChildNodeList(info.PkId))); } return treeChildNodeList; } /// <summary> /// json 數據裝換 /// </summary> /// <param name="obj"></param> /// <returns></returns> protected string ToJson(object obj) { string jsonData = (new JavaScriptSerializer()).Serialize(obj); return jsonData; }
3，在Controller中調用GetTreeParentList方法，獲得對象集合，然后把集合轉變成json對象（提示一下，后台所有的轉換，都是為了返回EasyUI所需要的Json格式。需要注意的是：Json格式中，所有屬性的字母都是小寫的，所以在封裝JsonTree對象時記得小寫,避免不必要的麻煩。）
/// <summary>
/// 獲取treejson 數據 post GetTreeJson
/// </summary>
/// <param name="deptId"></param>
/// <returns></returns>
public ActionResult GetTreeJson(int parentId)
{
List<CityEasyTree> treeList = new List<CityEasyTree>();
treeList = GetTreeParentList(parentId);
string json = ToJson(treeList);
reurn Content(json.ToLower());
}
4，前台界面就比較簡單了（根據EasyUI API 初始一個tree 官網文檔:http://www.jeasyui.net/plugins/185.html 需要引用相關js這里就不說了）
<ul id="tt" class="easyui-tree"> </ul> <script type="text/javascript"> $(function () { LoadData(0); }); function LoadData(parentId) { $('#tt').tree({ url: "/AricleCatetary/GetUserTreeJson?parentId=" + parentId, }); } </script>
5，實現效果如下圖。
6，最后附上 腳本，核心源碼和開發過程中需要的工具（鏈接: https://pan.baidu.com/s/1dFk1YO5 密碼: k3zk）。
還要感謝 "身未動、心已遠"（http://www.cnblogs.com/yonex/p/3379362.html） 博主的技術支持