使用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是其在数组中的索引。
分享到:
相关推荐
jsTree中文api文档,js操作树可移动节点 增加修改删除节点.jsTree中文api文档,js操作树可移动节点 增加修改删除节点.
jsTree实例,jsTree实例,jsTree实例
jsTree中文文档,其中包括各种插件中文介绍,提供广大学习jsTree的朋友们
jsTree操作 jsTree插件简介 Web开发使用jsTree实例
jsTree大集合 jsTree大集合 jsTree大集合
jsTree-directive, jsTree的Angular 指令 文档 jstree指令jsTree的Angular 指令文档文档使用 bower 安装$ bower i jstree-directive教程使用 jsTree,Angularjs和Expressjs语言构建一个基于We
jstree 1.0 最新版jstree 1.0 最新版jstree 1.0 最新版jstree 1.0 最新版jstree 1.0 最新版
jstree ajax ddd jstree ajax ddddd jstree ajax dddddd jstree ajax dddddddd ffffff
有关插件jstree的共享,一般的详细jstree更加强大。
jsTree中文文档
JStree需要的jstree.min.js、jstree.js和样式文件
jsTree JAVA例 不懂QQ512120305
jstree实现两张表的一个tree,数据库请根据映射文件自己建,
jsTree大集合,有利于大家共同开发,大家好好学习吧 我们共同一起开发吧
前端树jstree文档,包含详细的jstree常用方法和核心功能,文档为中文文档,便于阅读,简洁易懂。
vakata-jstree-651d32c.zip vakata-jstree-651d32c.zip vakata-jstree-651d32c.zip
jquery树型结构插件jstree-3.3.4版本,多层树结构,动态加载等所需要的插件
jsTree官方文档,demo的显示及方法的说明,不过1.0暂时还没有中文的api
jstree是一款非常实用的jQuery目录树插件。jsTree树插件易于扩展,可以配置主题,支持HTML和JSON格式的数据,还支持异步回调数据,支持多级树结构等。
JStree(最全),里面包含了多种的JS树,还有AJAX树,觉得好的,评论一下就行