?

1，首先構造tree接受的格式化數據結構MODEL

? ? ?/// <summary>

? ? ?/// 定義EasyUI樹的相關數據，方便控制器生成Json數據進行傳遞

? ? ?/// </summary>

? ? ?// [DataContract]

??? [Serializable]

? ? public class EasyTreeData

? ? {

??????? /// <summary>

??????? /// ID

??????? /// </summary>

? ? ? ?//? [DataMember]

? ? ? ? public string id { get; set; }

?

??????? /// <summary>

??????? /// 節點名稱

??????? /// </summary>

?????? // [DataMember]

??????? public string text { get; set; }

???????

??????? /// <summary>

??????? /// 是否展開

??????? /// </summary>

??????? //[DataMember]

??????? public string state? { get; set; }

?

??????? /// <summary>

??????? /// 圖標樣式

??????? /// </summary>

?????? // [DataMember]

??????? public string iconCls { get; set; }

?

?

??????? /// <summary>

??????? /// 子節點集合

?? ?????/// </summary>

????? //? [DataMember]

??????? public List<EasyTreeData> children { get; set; }

???????

??????? /// <summary>

??????? /// 默認構造函數

??????? /// </summary>

??????? public EasyTreeData()

??????? {

??????????? this.children = new List<EasyTreeData>();

??????????? this.state = "open";

??????? }

?

??????? /// <summary>

??????? /// 常用構造函數

??????? /// </summary>

??????? public EasyTreeData(string id, string text, string iconCls = "", string state = "open")

??????????? : this()

??????? {

???????? ???this.id = id;

??????????? this.text = text;

??????????? this.state = state;

??????????? this.iconCls = iconCls;

??????? }

?

??????? /// <summary>

??????? /// 常用構造函數

??????? /// </summary>

??????? public EasyTreeData(int id, string text, string iconCls = "", string state = "open", List<EasyTreeData> children=null )

??????????? : this()

??????? {

??????????? this.id = id.ToString();

??????????? this.text = text;

??????????? this.state = state;

??????????? this.iconCls = iconCls;

??????????? this.children = children;

??????? }

? ? }

2,前臺代碼

2.1，前臺代碼html代碼

? ? ?<ul id="tt"></ul>

2.2，前臺代碼腳本

? ? <script type="text/javascript">

?? ? ? ? $(function () {

??????????? $('#tt').tree({

??????????????? checkbox: false,

??????????????? url: '/Cultivate/GetUserTreeJson',

??????????????? onClick: function (node) {

???????????????????? alert(node.id);

??????????????? }

??????????? });

??????? });

? ?</script>

3，控制器（Cultivate）的方法GetUserTreeJson'

3.1，控制器（Cultivate）的方法GetUserTreeJson代碼

? ? ? ?[HttpPost]

??????? public ActionResult GetUserTreeJson()

??????? {

??????????? int PID = -1;

??????????? List<EasyTreeData> treeList = new List<EasyTreeData>();

??????????? if (PID == -1)

??????????? {

??????????????? var list = (from p in db.cultivates

??????????????????????????? where p.NodePID == PID

??????????????????????????? orderby p.NodeID

??????????????????????????? select p).ToList();

??????????????? foreach (cultivate info in list)

??????????????? { var child = (from p in db.cultivates

?????????????????????????????? where p.NodePID == info.NodeID

?????????????????????????????? orderby p.NodeID

?????????????????????????????? select p).ToList();

??????????????? if (child.Count ==0)

??????????????? {

??????????????????? treeList.Add(new EasyTreeData(info.NodeID, info.NodeName, "icon-user"));

???????? ???????}

??????????????? else

??????????????? {

??????????????????? treeList.Add(new EasyTreeData(info.NodeID, info.NodeName, "icon-user","open", GetUserTreeJson2(info.NodeID)));

????????????????

??????????????? }

??????????????? }

??????????? }????

??? ????????string json = ToJson(treeList);

??????????? return Content(json);

??????? }

3.2，如果有N級菜單循環代碼

? ? ? ? private List<EasyTreeData> GetUserTreeJson2( int PID)

????????? {

???????????? List<EasyTreeData> treeList = new List<EasyTreeData>();

????????????? var list = (from p in db.cultivates

????????????????????????? where p.NodePID == PID

????????????????????????? orderby p.NodeID

????????????????????????? select p).ToList();

????????????? foreach (cultivate info in list)

????????????? {

????????????????? var child = (from p in db.cultivates

?????????????????????????????? where p.NodePID == info.NodeID

?????????????????????????????? orderby p.NodeID

?????????????????????????????? select p).ToList(); ;

????????????????? if (child.Count == 0)

????????????????? {

??? ??????????????????treeList.Add(new EasyTreeData(info.NodeID, info.NodeName, "icon-user"));

????????????????? }

????????????????? else

????????????????? {

????????????????????? treeList.Add(new EasyTreeData(info.NodeID, info.NodeName, "icon-user", "closed", GetUserTreeJson2(info.NodeID)));

????????????????? }

????????????? }

????????????? return treeList;

????????? }

??????

3.3，Json代碼生成。

? ? ? ?protected string ToJson(object obj)

??????? {

??????????? string jsonData = (new JavaScriptSerializer()).Serialize(obj);

??????????? return jsonData;

??????? }

?

轉載于:https://www.cnblogs.com/lgx5/p/6189062.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的MVC4中EasyUI Tree异步加载JSON数据生成树的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。