jQuery EasyUI ComboTree在ASP.NET MVC中的使用

jQuery EasyUI中的ComboTree是一个比较常用的树形下拉控件，使用起来比较方便，详细使用方法见官方链接。http://www.jeasyui.com/documentation/combotree.php

但是在组织异步数据的时候感觉比较麻烦，所以今天在这里总结一些我的处理方式，有错误之处还望指正。

　　项目中有这样一个商品分类表，其对应的实体如下：

 1 public partial class GoodsCategories
 2     {
 3         public int Id { get; set; }
 4         public int Parentid { get; set; }
 5         public int Theleft { get; set; }
 6         public int Theright { get; set; }
 7         public string CategoryName { get; set; }
 8         public int Depth { get; set; }
 9         public int Status { get; set; }
10         public string CategoryPic { get; set; }
11         public int Sequence { get; set; }
12         public string KeyWords { get; set; }
13         public string Description { get; set; }
14         public string Parentids { get; set; }
15         public string Arrchildids { get; set; }
16         public System.DateTime AddTime { get; set; }
17     }

View Code

 

其中Parentid字段就是用来维系数据之间的非线性关系的。

 添加一个类JTreeNode，该类用来表示ComboTree控件需要返回的数据结构：

 1 public class JTreeNode
 2     {
 3         public int id { get; set; }
 4         public string text { get; set; }
 5         public string state { get; set; }
 6         public bool? Checked { get; set; }
 7         public string iconCls { get; set; }
 8         public object attributes { get; set; }
 9         public JTreeNode[] children { get; set; }
10 
11         public string ConvertToJson()
12         {
13             return this.ConvertCore(this);
14         }
15 
16         private string ConvertCore(JTreeNode node)
17         {
18             StringBuilder sb = new StringBuilder();
19             sb.Append("{");
20 
21             sb.AppendFormat("\"id\":{0},", node.id);
22 
23             if (!string.IsNullOrWhiteSpace(node.state))
24             {
25                 sb.AppendFormat("\"state\":\"{0}\",", node.state);
26             }
27             if (!string.IsNullOrWhiteSpace(node.iconCls))
28             {
29                 sb.AppendFormat("\"iconCls\":\"{0}\",", node.iconCls);
30             }
31             if (node.Checked != null)
32             {
33                 sb.AppendFormat("\"checked\":\"{0},\"", node.Checked);
34             }
35 
36             // to append attributes...
37             if (node.attributes != null)
38             {
39                 var attributesType = node.attributes.GetType();
40                 foreach (var item in attributesType.GetProperties())
41                 {
42                     var value = item.GetValue(node.attributes);
43                     if (value != null)
44                     {
45                         sb.AppendFormat("\"{0}\":\"{1}\",", item.Name, value);
46                     }
47                 }
48             }
49 
50             //recursive append children
51             if (node.children != null && node.children.Length > 0)
52             {
53                 StringBuilder sbChildren = new StringBuilder();
54                 foreach (var item in node.children)
55                 {
56                     sbChildren.AppendFormat("{0},", ConvertCore(item));
57                 }
58 
59                 sb.AppendFormat("\"children\":[{0}],", sbChildren.ToString().TrimEnd(','));
60             }
61 
62 
63             sb.AppendFormat("\"text\":\"{0}\"", node.text);
64 
65             sb.Append("}");
66 
67             return sb.ToString();
68         }
69     }

 

so,接下来就是要根据表GoodsCategories中的数据构造一个JTreeNode对象，控制器中的代码：

 1 public ActionResult LoadCategoriesTree()
 2         {
 3             #region cache
 4             ICache cache = new AspnetCache();
 5             var categories = new List<GoodsCategories>();
 6 
 7             string key = "GoodsCategories";
 8             var obj = cache.Get<List<GoodsCategories>>(key);
 9             if (obj != null)
10             {
11                 categories = obj as List<GoodsCategories>;
12             }
13             else
14             {
15                 categories = _goodsCategoriesService.QueryOver().ToList();
16                 cache.Add(key, categories);
17             }
18             #endregion
19 
20             JTreeNode jTreeNode = new JTreeNode() { id = 0, text = "所有分类" };
21             this.ConstructJTreeNode(ref jTreeNode, categories);
22 
23             var jsonResult = "[" + jTreeNode.ConvertToJson() + "]";
24             return Content(jsonResult);
25         }
26 
27         public void ConstructJTreeNode(ref JTreeNode node, List<GoodsCategories> categories)
28         {
29             //find children
30             var pid = node.id;
31             var children = from i in categories where i.Parentid == pid select i;
32 
33             if (children.Count() > 0)
34             {
35                 List<JTreeNode> temp = new List<JTreeNode>();
36                 foreach (var item in children)
37                 {
38                     var model = new JTreeNode()
39                     {
40                         id = item.Id,
41                         text = item.CategoryName
42                     };
43                     if (item.Depth < 3)
44                     {
45                         model.state = "closed";
46                     }
47                     temp.Add(model);
48 
49                 }
50                 node.children = temp.ToArray();
51             }
52 
53             //递归遍历
54             if (node.children != null)
55             {
56                 for (int i = 0; i < node.children.Length; i++)
57                 {
58                     ConstructJTreeNode(ref node.children[i], categories);
59                 }
60             }
61 
62         }

 

前端：

1 <script type="text/javascript">
2     $(function () {
3         $('#categoryid').combotree('setValue', @ViewBag.SelectedCategoryId);
4     });
5 </script>
6 <select id="categoryid" name="categoryid" class="easyui-combotree" style="width: 200px;"
7     data-options="url:'/ProductMan/LoadCategoriesTree',required:true">
8 </select>

View Code

效果图：

 

转载于:https://www.cnblogs.com/initial/p/3550444.html