1、插件截图
2、插件使用
首先引入jquery库，然后引入tree.js、tree.css文件，如下：
1 <script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script>
2
3 <script type="text/javascript" src="js/tree.js"></script>
4 <link rel="stylesheet" href="css/blue/tree.css"/>
3、DOM树
这种方式以HTML代码为基础，不能像JSON或AJAX_JSON方式那样动态加载数据，而且对函数的支持也不是很好，只适合做简单的树状菜单显示，如果是复杂的需求不建议使用这种方式
HTML代码
1 <div id="tree-demo1" style="margin-bottom: 10px;">
2 <div id="tree1">
3 <ul>
4 <li><a href="#">菜单</a></li>
5 <li open><a href="#">用户管理</a>
6 <ul>
7 <li><a href="#">用户查看</a></li>
8 <li><a href="#">用户添加</a></li>
9 <li open><a href="#">权限管理</a>
10 <ul>
11 <li><a href="#">权限查看</a></li>
12 <li><a href="#">权限添加</a></li>
13 <li><a href="#">分配权限</a></li>
14 </ul>
15 </li>
16 </ul>
17 </li>
18 <li><a href="#">系统管理</a>
19 <ul>
20 <li><a href="#">管理员管理</a>
21 <ul>
22 <li><a href="#">管理员查看</a></li>
23 <li><a href="#">管理员添加</a></li>
24 </ul>
25 </li>
26 <li><a href="#">黑名单管理</a></li>
27 <li><a href="#">日志管理</a></li>
28 </ul>
29 </li>
30 </ul>
31 </div>
32 </div>
JS脚本
1 // 初始化面板
2 $("#tree-demo1").panel({
3 title: "DOM树插件",
4 width: "600",
5 height: "45%"
6 });
7 // 初始化树插件
8 $("#tree1").tree();
4、JSON树
这种方式需要在初始化插件时传入一个JSON格式的data参数，插件会解析data数据，生成DOM结构，并且可以为节点绑定点击函数，另外对于函数的支持也比DOM方式好很多
HTML代码
1 <div id="tree-demo2" style="margin-bottom: 10px;">
2 <div id="tree2"></div>
3 </div>
JS脚本
以下代码使用data作为数据，为节点绑定点击函数
1 // 初始化面板
2 $("#tree-demo2").panel({
3 title: "JSON树插件",
4 width: "600",
5 height: "45%"
6 });
7 // 初始化树插件
8 $("#tree2").tree({
9 onClick: function(node) {
10 console.log(node);
11 alert(node.text);
12 },
13 data: [
14 {
15 "id": 1,
16 "text": "菜单"
17 },
18 {
19 "children": [
20 {
21 "id": 3,
22 "text": "用户查看"
23 },
24 {
25 "id": 4,
26 "text": "用户添加"
27 },
28 {
29 "children": [
30 {
31 "id": 6,
32 "text": "权限查看"
33 },
34 {
35 "id": 7,
36 "text": "权限添加"
37 },
38 {
39 "id": 8,
40 "text": "分配权限"
41 }
42 ],
43 "id": 5,
44 "open": false,
45 "parentId": 2,
46 "text": "权限管理",
47 "type": "folder",
48 "url": ""
49 }
50 ],
51 "id": 2,
52 "open": false,
53 "parentId": 0,
54 "text": "用户管理",
55 "type": "folder",
56 "url": ""
57 },
58 {
59 "children": [
60 {
61 "children": [
62 {
63 "id": 11,
64 "text": "管理员查看"
65 },
66 {
67 "id": 12,
68 "text": "管理员添加"
69 }
70 ],
71 "id": 10,
72 "open": false,
73 "parentId": 9,
74 "text": "管理员管理",
75 "type": "folder",
76 "url": ""
77 },
78 {
79 "id": 13,
80 "text": "黑名单管理"
81 },
82 {
83 "id": 14,
84 "text": "日志管理"
85 }
86 ],
87 "id": 9,
88 "parentId": 0,
89 "text": "系统管理",
90 "type": "folder"
91 }
92 ]
93 });
5、AJAX_JSON树
这种方式需要在初始化插件时传入一个url参数，插件会访问这个url获取json数据（和JSON树方式中的data参数一样的格式），然后生成DOM结构，为节点绑定点击函数，而且在点击父级菜单时会访问url（把这个菜单的id作为参数）获取下级菜单后再展开
HTML代码
1 <div id="tree-demo3"><!-- float: left; margin-left: 10px; -->
2 <div id="tree3"></div>
3 </div>
JS脚本
1 // 初始化面板
2 $("#tree-demo3").panel({
3 title: "AJAX_JSON树插件",
4 width: "600",
5 height: "45%"
6 });
7 // 初始化树插件
8 $("#tree3").tree({
9 url: "ajax/ajax_tree.jsp",
10 onClick: function(node) {
11 console.log(node);
12 alert(node.text);
13 }
14 });
后台脚本，需要使用json库支持
1 <%
2 List<TreeNode> nodes = new ArrayList<TreeNode>();
3
4 nodes.add(new TreeNode(1, "菜单", "", "", false, 0));
5 nodes.add(new TreeNode(2, "用户管理", "", "folder", false, 0));
6 nodes.add(new TreeNode(3, "用户查看", "", "", false, 2));
7 nodes.add(new TreeNode(4, "用户添加", "", "", false, 2));
8 nodes.add(new TreeNode(5, "权限管理", "", "folder", false, 2));
9 nodes.add(new TreeNode(6, "权限查看", "", "", false, 5));
10 nodes.add(new TreeNode(7, "权限添加", "", "", false, 5));
11 nodes.add(new TreeNode(8, "分配权限", "", "", false, 5));
12 nodes.add(new TreeNode(9, "系统管理", "", "folder", true, 0));
13 nodes.add(new TreeNode(10, "管理员管理", "", "folder", true, 9));
14 nodes.add(new TreeNode(11, "管理员查看", "", "", false, 10));
15 nodes.add(new TreeNode(12, "管理员添加", "", "", false, 10));
16 nodes.add(new TreeNode(13, "黑名单管理", "", "", false, 9));
17 nodes.add(new TreeNode(14, "日志管理", "", "", false, 9));
18
19 String reqId = request.getParameter("id");
20 int id = reqId == null || reqId.length() == 0 ? 0 : Integer.parseInt(reqId);
21
22 List<TreeNode> nodes2 = new ArrayList<TreeNode>();
23 for(TreeNode n : nodes) {
24 if(n.getParentId() == id) {
25 nodes2.add(n);
26 }
27 }
28
29 JSONArray jsonObject = JSONArray.fromObject(nodes2);
30 out.print(jsonObject.toString());
31 %>
6、tree插件初始化选项
选项 | 类型 | 作用 |
data | Object | JSON格式数据，形如： [ { id: 1, text: "", open: true|false, type: "folder", children: [ { id: 3, text: "", url: "" } ], url: "" }, { id: 2, text: "", url: "" } ] |
url | string | 获取节点数据的远程地址 |
onClick | function | 节点点击函数，插件会把被点击的节点对象传给这个函数 |
7、tree插件函数
函数名 | 参数 | 功能 | 返回值 | 示例 |
open | folderNodeId | 打开指定节点，前提是该节点已经存在且是一个folder | | $("#btn1").click(function() { $("#tree3").tree("open", 9);}); |
close | folderNodeId | 关闭指定节点，前提是该节点已经存在且是一个folder | | $("#btn3").click(function() { $("#tree3").tree("close", 9);}); |
openAll | | 打开全部folder节点 | | $("#btn5").click(function() { $("#tree3").tree("openAll");}); |
closeAll | | 关闭全部folder节点 | | $("#btn7").click(function() { $("#tree3").tree("closeAll");}); |
reload | folderNodeId | 重新加载指定folder节点 | | $("#btn9").click(function() { $("#tree3").tree("reload", 9);}); |
8、演示和代码
tree.js http://5ijy01.duapp.com/jq-ui/js/tree.js
tree.css http://5ijy01.duapp.com/jq-ui/css/blue/tree.css
Github https://github.com/xuguofeng/jq-ui
演示项目 http://5ijy01.duapp.com/jq-ui/index.html?tab=tree_demo
