• 使用jQuery开发tree插件

    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      "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      "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      "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
  • 相关阅读:
    NC105 二分查找
    Spark-Streaming总结
    spark java API 实现二次排序
    在eclipse上安装Scala插件
    maven:missing artifact jdk.tools:jar:1.7
    使用 Hive装载数据的几种方式
    Eclipse debug 调试快捷键
    yarn工作流程
    Windows 7 下安装mysql-5.7.18-winx64.zip
    希尔排序
  • 原文地址：https://www.cnblogs.com/xugf/p/9149732.html
Copyright © 2020-2023  润新知