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

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

阅读量：4878 次

发布时间：2019-06-11

本文共 3286 字，大约阅读时间需要 10 分钟。

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

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

1 
     
       2         
       3             My Documents 4             
       
         5                 
         6                     Photos 7                     
         
           8                         
           9 Friend10 
11                         
          12 Wife13 
14                         
          15 Company16 
17                     
         
18                 
19                 
        20                     Program Files21                     
         
          22                         
          Intel
23                         
          Java
24                         
          Microsoft Office
25                         
          Games
26                     
         
27                 
28                 
        index.html
29                 
        about.html
30                 
        welcome.html
31             
       
32         
33

第二种，在js中绑定：

$('#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绑定其实都是一样的只是写在元素标签上了而已

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
     
       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
     
       list = new List
      
       (); 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     /// 
       17     /// 根据ID获取子节点对象18     /// 
19     /// 
       20     /// 
       21     private static List
       
         GetTreeChildren(Int32 groupId) {22         List
        
          groupList = SqlDataHelper.GetUserGroupsById(groupId);23         List
         
           treeList = new List
          
           ();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 }

转载于:https://www.cnblogs.com/Mryjp/p/easyui_tree.html

你可能感兴趣的文章