【Jquery easyui 】Jquery easyui tree的使用

这个ui用的一切都是json数据。树也是如此！

后台需要返回与格式匹配的json数据才能正确加载树。

页面定义一个ui：

[html]  view plain   copy

1. <ul id="messageInfoAddTree" class="easyui-tree" checkbox="true" data-options="lines:true" style="height:94%"></ul>  

JS访问后台：

[javascript]  view plain   copy

1. //人员树  
2.     $('#messageInfoAddTree').tree({      
3.         url: "controller/crmMessageInfo/selectEditTree.json?rid=-1",  
4.         loadFilter: function(data){     
5.             return data;        
6.         }       
7.     });   

后台实体Bean中需要的属性：

[java]  view plain   copy

1. public class EmployeeTree {  
2.     private Integer id;  //人员编号  
3.     private String text; //人员名称  
4.     private Boolean checked = false; //是否选中  
5.     private List<EmployeeTree> children; //子节点  
6. }  

按照此种格式填充数据就能得到下面的结果：

获取已勾选的节点数据：

[javascript]  view plain   copy

1. var nodes = $('#messageInfoAddTree').tree('getChecked');  

还有一个功能，就是让tree的所有节点都勾选上或者取消勾选，在api中找了一下有一个方法：

check

target

选中指定节点。

那我们只能是选中根节点后，实现全选。

getRoot

none

获取根节点，返回节点对象。

全选：

[javascript]