JQuery EasyUI combotree

1.引入css和js

Java代码  

1. <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">  
2. <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>  
3. <script type="text/javascript" src="js/jquery.easyui.min.js"></script>  

2.加入标签

Java代码  

1. <input id="ddtree" name="ddtree" />  

注:id,用于js操作;name,用于获取值
3.加入js代码

Java代码  

1. $('#ddtree').combotree( {  
2.     //获取数据URL  
3.     url : 'Data',  
4.     //选择树节点触发事件  
5.     onSelect : function(node) {  
6.         //返回树对象  
7.         var tree = $(this).tree;  
8.         //选中的节点是否为叶子节点,如果不是叶子节点,清除选中  
9.         var isLeaf = tree('isLeaf', node.target);  
10.         if (!isLeaf) {  
11.             //清除选中  
12.             $('#ddtree').combotree('clear');  
13.         }  
14.     }  
15. });  

4.JSON格式

Java代码  

1. [ {  
2.     "id" : 1,  
3.     "text" : "Folder1",  
4.     "iconCls" : "icon-ok",  
5.     "children" : [ {  
6.         "id" : 2,  
7.         "text" : "File1",  
8.         "checked" : true  
9.     }, {  
10.         "id" : 3,  
11.         "text" : "Folder2",  
12.         "state" : "open",  
13.         "children" : [ {  
14.             "id" : 4,  
15.             "text" : "File3",  
16.             "attributes" : {  
17.                 "p1" : "value1",  
18.                 "p2" : "value2"  
19.             },  
20.             "checked" : true,  
21.             "iconCls" : "icon-reload"  
22.         }, {  
23.             "id" : 8,  
24.             "text" : "Async Folder",  
25.             "state" : "closed"  
26.         } ]  
27.     } ]  
28. }, {  
29.     "text" : "Languages",  
30.     "state" : "closed",  
31.     "children" : [ {  
32.         "id" : "j1",  
33.         "text" : "Java"  
34.     }, {  
35.         "id" : "j2",  
36.         "text" : "C#"  
37.     } ]  
38. } ]  

注:后台方法(见附带demo,Data.java,easyui.jsp)

API: http://www.jeasyui.com/documentation/index.php