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

浏览数：66 / 时间：2015年06月09日

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 static string ConvertToJson(JTreeNode node)
12         {
13             StringBuilder sb = new StringBuilder();
14             sb.Append("{");
15 
16             sb.AppendFormat("\"id\":{0},", node.id);
17 
18             if (!string.IsNullOrWhiteSpace(node.state))
19             {
20                 sb.AppendFormat("\"state\":\"{0}\",", node.state);
21             }
22             if (!string.IsNullOrWhiteSpace(node.iconCls))
23             {
24                 sb.AppendFormat("\"iconCls\":\"{0}\",", node.iconCls);
25             }
26             if (node.Checked != null)
27             {
28                 sb.AppendFormat("\"checked\":\"{0},\"", node.Checked);
29             }
30 
31             // to append attributes...
32             if (node.attributes != null)
33             {
34                 var attributesType = node.attributes.GetType();
35                 foreach (var item in attributesType.GetProperties())
36                 {
37                     var value = item.GetValue(node.attributes);
38                     if (value != null)
39                     {
40                         sb.AppendFormat("\"{0}\":\"{1}\",", item.Name, value);
41                     }
42                 }
43             }
44 
45             //recursive append children
46             if (node.children != null && node.children.Length > 0)
47             {
48                 StringBuilder sbChildren = new StringBuilder();
49                 foreach (var item in node.children)
50                 {
51                     sbChildren.AppendFormat("{0},", ConvertToJson(item));
52                 }
53 
54                 sb.AppendFormat("\"children\":[{0}],", sbChildren.ToString().TrimEnd(‘,‘));
55             }
56 
57 
58             sb.AppendFormat("\"text\":\"{0}\"", node.text);
59 
60             sb.Append("}");
61 
62             return sb.ToString();
63         }
64     }

View Code

JTreeNode类中包含一个静态的方法，用来将一个JTreeNode对象递归解析成JSON格式的字符串；

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(jTreeNode) + "]";
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         }

View Code

前端：

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>