easyui-tree绑定数据的几种方式

没想到easyui对json数据格式要求的那么严谨，折腾了半天

第一种直接使用标签方式，很容易就加载出来了：

 1 <ul class="easyui-tree">
 2         <li>
 3             <span>My Documents</span>
 4             <ul>
 5                 <li data-options="state:'closed'">
 6                     <span>Photos</span>
 7                     <ul>
 8                         <li>
 9                             <span>Friend</span>
10                         </li>
11                         <li>
12                             <span>Wife</span>
13                         </li>
14                         <li>
15                             <span>Company</span>
16                         </li>
17                     </ul>
18                 </li>
19                 <li>
20                     <span>Program Files</span>
21                     <ul>
22                         <li>Intel</li>
23                         <li>Java</li>
24                         <li>Microsoft Office</li>
25                         <li>Games</li>
26                     </ul>
27                 </li>
28                 <li>index.html</li>
29                 <li>about.html</li>
30                 <li>welcome.html</li>
31             </ul>
32         </li>
33     </ul>

第二种，在js中绑定：

 <ul id="myTree"></ul>

$('#myTree').tree({
                    method: 'get',
                    url: 'tree_data1.json'

                });

注意：easyui tree获取数据的HTTP方法默认是post，但是用post的时候却报了谓词错误，所以指定了get ----》需要查查，还不了解因果。

三，用data直接绑json：

 $.ajax({
     type: 'GET',
     url: 'tree_data1.json',
     success: function (result) {
         var myJson = eval('(' + result + ')');
         $('#myTree').tree({
             data: myJson
         });
     }
 });

这种方式绑定下面的这种json数据格式是有效的，但是方法二却绑不上：

[{ 'text':'.Net','state':'closed','children':[{'text':'C#'},{'text':'asp.Net'}]},{'text':'Java'}]

一般最好用双引号

第四种：与第二种js绑定其实都是一样的只是写在元素标签上了而已

 <ul class=" easyui-tree" data-options=" url:'JsonHandler.ashx'">

JsonHandler.ashx是asp.net中的一般处理文件，输出json串，当然这个返回的接送数据也要和第二种的json一致，不然还是绑不上

效果图：

后台根据id获取多级树：

创建树的实体类大概写了几个树常用到的属性

1 public class TreeEntity {
2     public string id { get; set; }
3     public string text { get; set; }
4     public string iconCls {
5         get { return "icon-group-bank"; }
6     }
7     public List<TreeEntity> children { get; set; }
8  }

一般处理处理程序序列化输出树：

 1   public void ProcessRequest(HttpContext context) {
 2 
 3         Int32 groupId = (Int32)context.Session["LoginUserGroupID2"];
 4         string groupName = SqlDataHelper.GetGroupNameById(groupId);
 5 
 6         List<TreeEntity> list = new List<TreeEntity>();
 7         list.Add(new TreeEntity() {
 8             id = groupId.ToString(),
 9             text = groupName,
10             children = GetTreeChildren(groupId)
11         });
12         string responseString = ClassHelper.ObjectToJSON(list);//序列化树实例
13         context.Response.ContentType = "text/plain";
14         context.Response.Write(responseString);
15     }
16     /// <summary>
17     /// 根据ID获取子节点对象
18     /// </summary>
19     /// <param name="groupId"></param>
20     /// <returns></returns>
21     private static List<TreeEntity> GetTreeChildren(Int32 groupId) {
22         List<GroupEntity> groupList = SqlDataHelper.GetUserGroupsById(groupId);
23         List<TreeEntity> treeList = new List<TreeEntity>();
24         if (groupList.Count < 1) {
25             return null;
26         }
27         else {
28             for (int i = 0; i < groupList.Count; i++) {
29                 TreeEntity tree = new TreeEntity();
30                 tree.id = groupList[i].GroupID.ToString();
31                 tree.text = groupList[i].GroupName;
32                 tree.children = GetTreeChildren(groupList[i].GroupID);
33                 treeList.Add(tree);
34             }
35             return treeList;
36         }
37     }