.Net Mvc 返回Json,动态生成EasyUI Tree

           最近做一个项目,开始接触EasyUI,感觉很强大,很适合我这种对前台不是很感冒的人。在学习Tree的过程中,感觉网上的资料挺乱的,很多只是把EasyUI API 抄了一遍。现在把最近这段时间的学到的,给大家分享一下吧,也请大家提意见共同研究。废话不多说了,要实现全动态生成无限级Tree。

1.最终的效果图,可以实现无限分层。

2.数据库表的生成代码:

1 CREATE TABLE [dbo].[Tree](
2     [ID] [int] IDENTITY(1,1) NOT NULL,
3     [CityName] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,
4     [ParentID] [int] NULL,
5     [State] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,
6     [Url] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL
7 ) ON [PRIMARY]

说明:这个是EasyUI tree的数据库表生成代码。对应的字段有IDCityNameParentIDStateUrl。其中ParentID是父节点ID,Url是指向的页面。

3. EasyUI Tree需要的的数据格式要符合json。根据EasyUI Tree的API 中常用属性,我们来制作.NET中的Model,先来看代码,后面说明。

 1 namespace MvcDemo.Model
 2 {
 3     public class JsonTree
 4     {
 5         private int _id;
 6         private string _text;
 7         private string _state="open";
 8         private Dictionary<string, string> _attributes=new Dictionary<string, string>();
 9         private object _children;        
10         
11         public int id
12         {
13             get { return _id; }
14             set { _id = value; }
15         }
16         public string text
17         {
18             get { return _text; }
19             set { _text = value; }
20         }
21         public string state
22         {
23             get { return _state; }
24             set { _state = value; }
25         }
26         public Dictionary<string, string> attributes
27         {
28             get { return _attributes; }
29             set { _attributes = value; }
30         }
31         public object children
32         {
33             get { return _children; }
34             set { _children = value; }
35         }
36     }
37 }

说明(从EasyUI 的API中复制):

  • id:节点ID,对加载远程数据很重要。
  • text:显示节点文本。
  • state:节点状态,'open' 或 'closed',默认:'open'。在设置为'closed'的时候,当前节点的子节点将会从远程服务器加载他们。
  • attributes: 被添加到节点的自定义属性。(Url属性就在这个里面,用Dictionary可以方便的扩展attribute。)
  • children: 一个节点数组声明了若干节点。(这个是子节点,它拥有所有的父节点属性)

    children 类型为Object ,如果把children也定义为JsonTree类型,形成嵌套类,但是实例化的时候则会出现死循环问题,一直没有解决,如果哪位知道如何解决,可以给我留言。如果对Object不明白,可以参考微软MSDN

4. 从数据库得到的DataTable转成成EasyUI所需要的对象结合,下面也是本文的核心代码

 1 namespace MvcDemo.Common
 2 {
 3      public class EasyUITree
 4     {
 5         public List<JsonTree> initTree(DataTable dt)
 6         {
 7             DataRow[] drList = dt.Select("parentid=0");
 8             List<JsonTree> rootNode = new List<JsonTree>();
 9             foreach (DataRow dr in drList)
10             {
11                 JsonTree jt = new JsonTree();
12                 jt.id = int.Parse(dr["id"].ToString());
13                 jt.text = dr["cityname"].ToString();
14                 jt.state = dr["state"].ToString();
15                 jt.attributes = CreateUrl(dt, jt);
16                 jt.children = CreateChildTree(dt, jt);
17                 rootNode.Add(jt);
18             }
19             return rootNode;
20         }
21 
22         private List<JsonTree> CreateChildTree(DataTable dt, JsonTree jt)
23         {
24             int keyid = jt.id;                                        //根节点ID
25             List<JsonTree> nodeList = new List<JsonTree>();
26             DataRow[] children = dt.Select("Parentid='" + keyid + "'");
27             foreach (DataRow dr in children)
28             {
29                 JsonTree node = new JsonTree();
30                 node.id = int.Parse(dr["id"].ToString());
31                 node.text = dr["cityname"].ToString();
32                 node.state = dr["state"].ToString();
33                 node.attributes = CreateUrl(dt, node);
34                 node.children = CreateChildTree(dt, node);
35                 nodeList.Add(node);
36             }
37             return nodeList;
38         }
39 
40     
41         private Dictionary<string, string> CreateUrl(DataTable dt, JsonTree jt)    //把Url属性添加到attribute中,如果需要别的属性,也可以在这里添加
42         {
43             Dictionary<string, string> dic = new Dictionary<string, string>();
44             int keyid = jt.id;
45             DataRow[] urlList = dt.Select("id='" + keyid + "'");
46             string url = urlList[0]["Url"].ToString();
47             dic.Add("url", url);
48             return dic;
49         }
50     }
51 }

说明:上面这三段代码,最主要的是前两段递归生成树。先生成根节点,然后在依次生成此节点的子节点CreateUrl方法生成EasyUI Tree所需要的结构。

5.在Controller中调用initTree方法,获得对象集合,然后把集合转变成json对象

1         public ActionResult JsonTreeTest()
2         {
3             EasyUIBLL bll = new EasyUIBLL();
4             EasyUITree EUItree=new EasyUITree();
5             DataTable dt = bll.GetTable();
6             List<JsonTree> list = EUItree.initTree(dt);
7             var json = JsonConvert.SerializeObject(list); //把对象集合转换成Json
8             return Content(json);
9         }

说明:“var json = JsonConvert.SerializeObject(list);” 此步骤需要用 Newtonsoft.Json.dll 下载,使用这个动态连接库,不用再为拼接json字符串而苦恼,可以把更多经历放在逻辑上,注意记得添加引用 “using Newtonsoft.Json;”

6.前台的代码:

            $('#tree').tree({
                url: '/EasyUI/JsonTreeTest',
                checkbox:true
            });

前台就采用EasyUI提供的方法。url值就是controller中对应的方法。

7.获得到的Json格式数据:  由于比较长,此处折叠起来了

 1 [
 2     {
 3         "id": 1,
 4         "text": "中国",
 5         "state": "open",
 6         "attributes": {
 7             "url": ""
 8         },
 9         "children": [
10             {
11                 "id": 2,
12                 "text": "北京",
13                 "state": "open",
14                 "attributes": {
15                     "url": ""
16                 },
17                 "children": [
18                     {
19                         "id": 8,
20                         "text": "海淀区",
21                         "state": "",
22                         "attributes": {
23                             "url": ""
24                         },
25                         "children": []
26                     },
27                     {
28                         "id": 9,
29                         "text": "朝阳区",
30                         "state": "",
31                         "attributes": {
32                             "url": ""
33                         },
34                         "children": []
35                     }
36                 ]
37             },
38             {
39                 "id": 3,
40                 "text": "上海",
41                 "state": "open",
42                 "attributes": {
43                     "url": ""
44                 },
45                 "children": []
46             },
47             {
48                 "id": 4,
49                 "text": "河南",
50                 "state": "open",
51                 "attributes": {
52                     "url": ""
53                 },
54                 "children": [
55                     {
56                         "id": 5,
57                         "text": "郑州",
58                         "state": "open",
59                         "attributes": {
60                             "url": ""
61                         },
62                         "children": []
63                     },
64                     {
65                         "id": 6,
66                         "text": "焦作",
67                         "state": "open",
68                         "attributes": {
69                             "url": ""
70                         },
71                         "children": [
72                             {
73                                 "id": 7,
74                                 "text": "解放区",
75                                 "state": "open",
76                                 "attributes": {
77                                     "url": ""
78                                 },
79                                 "children": [
80                                     {
81                                         "id": 10,
82                                         "text": "建设路",
83                                         "state": "",
84                                         "attributes": {
85                                             "url": ""
86                                         },
87                                         "children": []
88                                     }
89                                 ]
90                             }
91                         ]
92                     }
93                 ]
94             }
95         ]
96     }
97 ]
JsonTree格式代码

 

8.提示一下,后台所有的转换,都是为了返回EasyUI所需要的Json格式。需要注意的是:Json格式中,所有属性的字母都是小写的,所以在封装JsonTree对象时记得小写,避免不必要的麻烦。

9.由于本人的语言表达能力有限,如果有什么地方没有说明白,可以加我QQ:2413660559 ,也欢迎给我指出文中的错误。

总结:采用这种方式,可以从数据库读取出数据,通过递归生成树形对象,再把树形对象转成Json对象,传递给前台显示,这种方式,代码的整齐度大大提高,面向对象,易于扩展。

                                          转载请标明出处。

posted @ 2013-10-20 19:31  身未动、心已远  阅读(7180)  评论(7编辑  收藏  举报