jstree

使用jsTree按需装载子节点
文章分类:Web前端
本文主要内容：

一、jsTree的基本使用方法；

二、按需装载子节点，即每次展开某节点时，才去服务器装载其子节点。



jsTree是基于jQuery的一个树形插件，该项目主页：http://www.jstree.com/

本文使用版本为0.9.9a，主要参考文档在下载包里的documentation.html文件。



一、jsTree的基本使用方法：



1. 在页面导入必要的库文件：

基本的使用只需要jquery.js和jquery.tree.js两个文件，都在jsTree的下载包里，不同版本的jsTree需要导入的库文件可能不同。



2. 在页面需要显示树的地方：

Html代码
1.<div id="myTree"></div> 
<div id="myTree"></div>

3. 生成树的js方法：

Js代码
1.$("#myTree").tree({  
2.    data : {   
3.        type : "json",  
4.        url : "getChildren.do" 
5.    }  
6.}); 
$("#myTree").tree({
data : {
type : "json",
url : "getChildren.do"
}
});这是最简单的写法，更多配置可参考documentation.html里的Configuration段。

其中type指返回的数据类型，这里设置为json，所以url请求返回的数据必需是jsTree约定的json格式，对于每个节点最基本的格式如下：

Js代码
1.{   
2.    attributes: { id : "node_identificator", some-other-attribute : "attribute_value" },   
3.    data: "node_title",   
4.    // Properties below are only used for NON-leaf nodes  
5.    state: "closed", // or "open"  
6.    children: [ /* an array of child nodes objects */ ]  
7.} 
{
attributes: { id : "node_identificator", some-other-attribute : "attribute_value" },
data: "node_title",
// Properties below are only used for NON-leaf nodes
state: "closed", // or "open"
children: [ /* an array of child nodes objects */ ]
}
attributes里为自定义属性，data为节点显示的文本，state值为closed时，节点前面有表示节点可以被展开的标识。还有其它写法可参考documentation.html里的Datastores段。



二、按需装载子节点：

在上面基本使用方法的第3点里提到更多配置可参考documentation.html里的Configuration段，其中有一个callback配置项，按需装载子节点可以通过这里的onopen事件触发，即当展开节点时。在上面第3点的代码里加上callback配置项如下：

Js代码
1.$("#myTree").tree({  
2.    data : {   
3.        type : "json",  
4.        async : true,  
5.        url : "getChildren.do" 
6.    },  
7.    callback : {  
8.        onopen : function (node, tree_obj) {  
9.            if (tree_obj.children(node).length == 0) {  
10.                $.getJSON('getChildren.do, {'id' : node.id}, function(data) {  
11.                    $.each(data, function(entryIndex, entry) {  
12.                        tree_obj.create(entry, node, entryIndex + 1);  
13.                    });  
14.                });  
15.            }  
16.            return true;  
17.        }  
18.    }  
19.}); 
$("#myTree").tree({
data : {
type : "json",
async : true,
url : "getChildren.do"
},
callback : {
onopen : function (node, tree_obj) {
if (tree_obj.children(node).length == 0) {
$.getJSON('getChildren.do, {'id' : node.id}, function(data) {
$.each(data, function(entryIndex, entry) {
tree_obj.create(entry, node, entryIndex + 1);
});
});
}
return true;
}
}
});其中， $.getJSON和$.each方法是jQuery中的方法，children和create是jsTree的方法，在documentation.html里的API段里可找到它们的使用说明。上面代码中依次出现的参数，node是要展开的节点对象，tree_obj是整个树对象，data是请求返回的json格式数据，依然是要符合之前提到的约定格式。entry是遍历返回的节点数组时的当前节点，entryIndex是其在数组中的索引。