JsTree3.3动态加载树节点

【JsTree3.3学习笔记】动态加载树节点

Jstree介绍

jsTree是jQuery的插件，具有交互性的树。它是免费的、开源的、容易扩展、主题化和可配置的，它支持HTML、JSON数据源和数据加载。

资源准备

1、  下载jstree的相关文件，包括themes、jstree.js。

下载地址1：https://www.jstree.com/ 官方地址打开速度比较慢

下载地址2：https://github.com/vakata/jstreegithub速度快

2、  下载jquery，要求版本为1.9以上。

下载地址：http://jquery.com/

开发步骤：

1、  使用任意的开发工具创建一个web工程（本人使用的eclipse）。创建完成后拷贝相关文件到程序目录。见下图：

2、  在创建1.jsp，代码如下：

[html]  view plain  copy

1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
2.     pageEncoding="UTF-8"%>  
3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
4. <html>  
5. <head>  
6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
7. <title>JSTree</title>  
8. <link rel="stylesheet" href="js/themes/default/style.min.css" />  
9. <script src="js/jquery-1.9.1.min.js"></script>  
10. <script src="js/jstree.min.js"></script>  
11. </head>  
12. <body>  
13.     <div id="jstree_div"></div>  
14.     <script type="text/javascript">  
15.         $(function() {  
16.             $('#jstree_div').jstree({  
17.                 'core' : {  
18.                     'check_callback': true,  
19.                     "data" : function (obj, callback){  
20.                             $.ajax({  
21.                                 url : "/Webs/Services",  
22.                                 dataType : "json",  
23.                                 type : "POST",  
24.                                 success : function(data) {  
25.                                     console.info(data);  
26.                                     if(data) {  
27.                                         callback.call(this, data);  
28.                                     }else{  
29.                                         $("#jstree_div").html("暂无数据！");  
30.                                     }  
31.                                 }  
32.                             });  
33.                     }  
34.                 },  
35.                 "plugins" : [ "sort" ]  
36.             }).bind("select_node.jstree", function(event, data) {  
37.                 var inst = data.instance;  
38.                 var selectedNode = inst.get_node(data.selected);  
39.                 //console.info(selectedNode.aria-level);  
40.                 var level = $("#"+selectedNode.id).attr("aria-level");  
41.                 if(parseInt(level) <= 3){  
42.                     loadConfig(inst, selectedNode);  
43.                 }  
44.             });  
45.         });  
46.         function loadConfig(inst, selectedNode){  
47.               
48.             var temp = selectedNode.text;  
49.             //inst.open_node(selectedNode);  
50.             //alert(temp);  
51.             $.ajax({  
52.                 url : "/Webs/LoadConfig",  
53.                 dataType : "json",  
54.                 type : "POST",  
55.                 success : function(data) {  
56.                     if(data) {  
57.                        selectedNode.children = [];  
58.                        $.each(data, function (i, item) {  
59.                                 var obj = {text:item};  
60.                                 //$('#jstree_div').jstree('create_node', selectedNode, obj, 'last');  
61.                                 inst.create_node(selectedNode,item,"last");  
62.                        });  
63.                        inst.open_node(selectedNode);  
64.                     }else{  
65.                         $("#jstree_div").html("暂无数据！");  
66.                     }  
67.                 }  
68.             });  
69.         }  
70.     </script>  
71. </body>  
72. </html>  

3、  创建后台的树初始化的servlet，命名为Services，具体代码如下：

[java]  view plain  copy

1. package com.wisdom.test;  
2.   
3. import java.io.IOException;  
4. import javax.servlet.ServletException;  
5. import javax.servlet.http.HttpServlet;  
6. import javax.servlet.http.HttpServletRequest;  
7. import javax.servlet.http.HttpServletResponse;  
8.   
9. /** 
10.  * Servlet implementation class Services 
11.  */  
12. public class Services extends HttpServlet {  
13.     private static final long serialVersionUID = 1L;  
14.          
15.     /** 
16.      * @see HttpServlet#HttpServlet() 
17.      */  
18.     public Services() {  
19.         super();  
20.     }  
21.   
22.     /** 
23.      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 
24.      */  
25.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
26.         response.setCharacterEncoding("UTF-8");  
27.         response.setContentType("application/json; charset=utf-8");  
28.         response.getWriter().write("[\"Simple root node\",{\"text\":\"Root node 2\",\"children\":[\"Child 1\",\"Child 2\"]},{\"text\":\"Root node 1\",\"children\":[\"Child 1\",\"Child 2\"]}]");  
29.         //response.getWriter().append("Served at: ").append(request.getContextPath());  
30.     }  
31.   
32.     /** 
33.      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 
34.      */  
35.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
36.         doGet(request, response);  
37.     }  
38.   
39. }  

4、  创建后台的点击某个节点动态加载子节点数据的的servlet，命名为LoadConfig，具体代码如下：

[java]  view plain  copy

1. package com.wisdom.test;  
2.   
3. import java.io.IOException;  
4. import javax.servlet.ServletException;  
5. import javax.servlet.http.HttpServlet;  
6. import javax.servlet.http.HttpServletRequest;  
7. import javax.servlet.http.HttpServletResponse;  
8.   
9. /** 
10.  * Servlet implementation class LoadConfig 
11.  */  
12. public class LoadConfig extends HttpServlet {  
13.     private static final long serialVersionUID = 1L;  
14.          
15.     /** 
16.      * @see HttpServlet#HttpServlet() 
17.      */  
18.     public LoadConfig() {  
19.         super();  
20.     }  
21.   
22.     /** 
23.      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 
24.      */  
25.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
26.           
27.         //response.getWriter().append("Served at: ").append(request.getContextPath());  
28.           
29.         response.setCharacterEncoding("UTF-8");  
30.         response.setContentType("application/json; charset=utf-8");  
31.         response.getWriter().write("[\"Child01\",\"Child02\",\"Child03\"]");  
32.     }  
33.   
34.     /** 
35.      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 
36.      */  
37.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
38.         doGet(request, response);  
39.     }  
40.   
41. }  

5、  运行结果如下，一个动态加载的树结构就出来了。

总结一下

本示例主要使用的是Jstree的如下功能：

Ø  data属性使用异步的ajax调用后台获取到json数据格式，再赋值给data属性的方式来实现异步加载树节点。

Ø  bind属性用来绑定对树节点的各种操作，本示例主要使用的是select_node操作，在绑定事件中获取当前被选中的节点以及当前树的实例，用于后续的在选中节点中添加子节点的操作。

Ø  check_callback属性这个是boolean类型的变量，用来确定当用户试图修改树的结构时的操作是否被允许。当变量值为“true”时，所有操作，如创建，重命名，删除，移动或复制等都是允许的，否则都是被禁止的，所以本示例中要实现选择某个节点后动态加载其子节点的操作必须把该属性设置成true。

Ø  create_node方法这个方法是用来动态创建树节点的。方法简介

原型  create_node : function (par, node, pos, callback,is_loaded)

参数说明

l  par  父节点，也就是要在那个节点下创建其子节点，如果需要创建的是父节点，传递"#"或“null”

l  node 子节点的数据，可以是json格式，或者是一个节点的字符串

l  pos   子节点插入的位置，可以取值为"before" 、"after" 、“first”、”last”，默认为last

l  callback 节点创建完成后的回调函数

l  is_loaded 是否检查父节点成功地加载，取值true、false

Ø  aria-level属性标识当前选择的节点的级别，也就是树的层级，这个可以控制树的层级，本示例中控制了只能动态加载3层。用法如下：

[javascript]  view plain  copy

1. var level = $("#"+selectedNode.id).attr("aria-level");  
2. if(parseInt(level) <= 3){  
3.     loadConfig(inst, selectedNode);  
4. }