jstree的简单解决方案

jstree王者归来

jstree王者归来： QQqun 105564508   希望与各位在线交流探讨
写在前面：

最近在项目中要用到jstree这个东西，参考了网络上各位大家的关于jstree的学习摘要，但是大部分jstree的文章中都是引用了jstree的demo，对其没有什么实质的详细阐述，希望本文能给那些和我一样在jstree迷途中的人们打开一盏明灯；如果在以下博文中写的有问题的话，大伙有意见请尽管提，我虚心接受。如果写的实在不堪入目请您尽快绕道。谢谢
另外，感谢网上各位jstree大侠的指导。


一、JStree的简单介绍
1.关于jstree
jsTree 使用了 jQuery 和 Sarissa，是一个是免费的但是设置灵活的，基于 JavaScript 跨浏览器支持的网页树形部件。

jsTree 支持三种数据源头：
预先定义好的 HTML -嵌套的列表结构
JSON
XML

jsTree 的主要功能有：

同步导入 – 只需要提供一个 URL，就会去请求数据（只适合 JSON 和 XML 数据形式）。
支持打开，关闭，重命名，创建，删除节点（通过预先定义好的规则）
支持多种回调函数（onchange, oncreate, ondelete, onload, 等等）
支持拖拉
支持多重选择
支持多种语言
支持主题（可以修改图标，大小和背景等等）
可以支持动态打开和关闭(configurable)
可选的快捷键导航
支持多个树形部件
另外还可以做为 jQuery 插件。
官方主页：http://www.jstree.com/
jstree在goolge code上的托管项目：
http://code.google.com/p/jstree/

二、JStree的简单用法

本文所讲的jstree是基于jstree0.99a版本进行异步加载tree的基本用法，截止到10年6月目前官方最新版本为1.0正式版。前者0.99a以jquery-1.3.2.js为js库为基础构建，后者1.0以jquery-1.4.2.js为基础构建。两者在架构上也非常的不一样，0.99a和1.0为完全不同的构建方式，在用户使用上也是很大的不同。
所以基于用户的不同需求，可以选择不同的jstree不同版本。


代码部分：

<%@page language="java" %>
<%@page pageEncoding="gb2312"%>
<script type="text/javascript" src="/commons/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/commons/jquery/jquery.tree.js"></script>
<script type="text/javascript" language="javascript">
  <!--  	
    	$(function () { 
    		$.ajaxSetup({cache:false});//ajax调用不使用缓存
    		$("#vcsTree").tree({//创建树开始
    			  data : { 
    				type : "json",//类型为json
    				async : true,//动态操作
    				opts : {
    					method : "get", //设置以get方式向服务器提交数据
    					url : "datajson.jsp"//此页面返回以json标准格式的json数据串
    				}
    			 },//end data
    			 ui:{
    				 theme_name : "classic" //设置皮肤样式
    			 },
    			 lang:{     
				 loading : "目录加载中……"  //设置节点打开时默认加载显示默认为loading
			 },  
    			 types :{
    			 	"default" : {
    			 		draggable : false //设置节点不可拖拽
    			 	}
    			 },
	  		 callback : {	 
			     beforedata : function(node,tree_obj){
						return {id : $(node).attr("id") || 0,rel : $(node).attr("rel")};//进行以异步传参 
				},
				onselect : function(node,tree_obj){//节点单击事件
						 var test = $(node).children("a").attr("href");//获取json串A标签中href属性值
						 $(parent.document.body).find('#CONTENT_WORK_MAIN').attr('src', test);
						 //获取点击的A标签的href属性，然后获取右边的iframe对象，然后设置iframe的location
				},
				onsearch : function(node, tree_obj) {//节点查找功能
					tree_obj.container.find(".search").removeClass("search");
					node.addClass("search");	
				}
			} //end callback	    
    		});
    	});
	     function searchnodes(){
	     	alert("start search");
	   	   jQuery.tree.focused().search(jQuery('#search_').val());
	     }
    //-->
</script>
<div id="container"> 
			<h2 class="title">JsTree</h2>
			<div id="vcsTree"></div>
		<div class="source">
			<input type="text" id="search_" />
			<input type="button" id="search_op" onclick="searchnodes()" value="Search" />
		</div>
</div>

部分代码的解释：

本代码可直接作为异步加载tree项目中源码来用，部分功能依用户要求可自行删除。
代码格式以固定形式进行保留即可，部分代码已有注释，在此将不再进行详细阐释。
现对我在jstree异步加载的部分做些说明：

				beforedata : function(node,tree_obj){
						return {id : $(node).attr("id") || 0,rel : $(node).attr("rel")}; //进行以异步传参 
				},

beforedata 它一定是要写在callback函数中的，return的两个参数 "id" 和 "rel"  就是客户端传给服务器端的两个参数值，id 表示节点的nodeid，rel 表示节点的type类型（是root节点，还是folder节点抑或是leaf节点）， 服务器端对其进行逻辑处理，把处理结束的数据以json格式的数据返回给客户端，进行下级节点的加载。
当然用户也可以选择传一个参，或者更多。

onselect : function(node,tree_obj){//节点单击事件
						 var test = $(node).children("a").attr("href");//获取json串A标签中href属性值
						 $(parent.document.body).find('#CONTENT_WORK_MAIN').attr('src', test);
						 //获取点击的A标签的href属性，然后获取右边的iframe对象，然后设置iframe的location
				},

onselect 写在回调函数里，这个地方主要是做了一件事，点击tree上节点，显示对应树节点的基本信息，分左右两栏两个iframe，总是单击左边树节点时，对右边iframe的src进行处理，以便显示对应的树的详细信息。
说白点就是单击节点的时候总会以已知的属性值，替换掉右边栏iframe的src值。

onsearch : function(node, tree_obj) { //节点查找功能
   tree_obj.container.find(".search").removeClass("search");
   node.addClass("search");	
}
function searchnodes(){
   jQuery.tree.focused().search(jQuery('#search_').val());
}
<div class="source">
   <input type="text" id="search_" />
   <input type="button" id="search_op" onclick="searchnodes()" value="Search" />
</div>

onsearch ，此函数也是写在callback函数里，此函数主要实现节点查找功能，输入要查找的节点名称，所有匹配条件的节点都会被打开；
本部分代码在jstree的例子中就是这样写的，removeClass，addClass主要为查找到的节点添加显示样式，search("节点名称")就是实现查找功能的函数当然只限于当前树进行节点查找。

但是到现在为止，本树只实现了异步加载树的功能，对异步节点的查找功能还在继续学习之中，另外对jstree的换肤功能也要根据项目的需求进行改进，可对每个节点进行单独换肤的功能。

jstree 简单解决方案之节点换肤：http://www.iteye.com/topic/701859



如果有什么不理解的地方，请给本人留言。我们可以互相交流，共同进步。
对以上功能如添加、删除节点、异步查找节点等的功能以后还会继续进行完善，请继续关注。

本jstree实现的图片：



我的json数据格式： 请查看 jsondata.rar 

评论

28 楼 一剪梅 2015-08-23  

请问一下plugins这个怎么设置 ？

27 楼 yvfish 2011-05-06  

各位大神，请问哪有jsTree的回调函数列表文档或说明？

26 楼 sage0427 2011-03-17  

先下载了...好好研究下...不知道有没有bug...谢谢

25 楼 chenle6188 2011-02-18  

我的方案，但是有点点小小问题，大家帮看下：
$("#menuTree").jstree({
//初始化内容，省略。。。
})
//选中要修改图标的节点
.bind("select_node.jstree", function (e, data) {
//能获取图片的URL地址
var bgImg = data.rslt.obj.find("ins").eq(0).css("background-image"));
//类似获取，只需要设置下应该就可以，但是貌似不成功。
data.rslt.obj.find("ins").eq(0).css("background-image","新图标的地址");
})

24 楼 happy7259 2010-08-18  

感觉不好用，官方文档 写得耶不怎么好。。

23 楼 weiqiulai 2010-07-15  

不支持IE8啊！？晕死

22 楼 forgood 2010-07-11  

这种属性结构的js控件很多，关键是看性能怎么样？？？楼主有测试过吗？

21 楼 suiye007 2010-07-09  

嗯，学习。。。。

20 楼 ihibernate 2010-06-30  

kjj 写道

我下载了1.0 ,楼上这个radio是怎么弄出来的,我看了官方插件,好像没有这个东西吧

他那个东西是自己实现的，jstree应该没有radio这个东西吧，你看看jstree的插件库就知道了

19 楼 kjj 2010-06-30  

我下载了1.0 ,楼上这个radio是怎么弄出来的,我看了官方插件,好像没有这个东西吧

18 楼 西门吹牛 2010-06-29  

plghqr 写道

kjj 写道

西门吹牛 写道

怎么实现checkbox和radio,如果不能做这2种树的话,还是很遗憾

checkbox 只要申明插件就可以了,radio是啥,默认就是单选状态啊!!

图片附件




checkbox tree，支持上级选中，下级自动选中，也可以下级选中，所有父级别自动选中




普通树

太好了 这个数功能还是很全的,能否把代码贴出来学习一下

17 楼 lovewaz01 2010-06-29  

我刚用JSTREE在项目中做的一个树,右键功能,拖拽,绑定都比较好用,但是它的CHECKBOX实在是没办法说,太难用了,基本上checkbox中所有的实现方法我又重写一便才能使用,而且很多简单而适用的功能都没加进去.我用的是0.99A版本,1.0的可能会好点.

16 楼 plghqr 2010-06-29  

kjj 写道

西门吹牛 写道

怎么实现checkbox和radio,如果不能做这2种树的话,还是很遗憾

checkbox 只要申明插件就可以了,radio是啥,默认就是单选状态啊!!

图片附件




checkbox tree，支持上级选中，下级自动选中，也可以下级选中，所有父级别自动选中




普通树

15 楼 plghqr 2010-06-29  

破碎虚空 写道

有没有测试过性能如何？单一个节点下有3000+数据时候，表现怎样？

单一节点下有3000+的子节点的话（不是说孙子节点，孙子节点可以通过ajax异步请求完成），这样的东西适合用tree表现吗？用户找起来是不是都得眼花了？
如果真有3000+子节点，只能说，这个分类太差，或者根本就不适合用tree来表现

14 楼 西门吹牛 2010-06-29  

既然1.0和0.99差异较大,希望楼主已1.0的讲解为准,学习即将被淘汰的方式不是浪费时间吗?还有希望楼主讲讲如何实现checkbox和radio

13 楼 kjj 2010-06-29  

西门吹牛 写道

怎么实现checkbox和radio,如果不能做这2种树的话,还是很遗憾

checkbox 只要申明插件就可以了,radio是啥,默认就是单选状态啊!!

12 楼 SpreadDiaries 2010-06-28  

Jstreeview 更易上手

11 楼 ihibernate 2010-06-28  

lqixv 写道

能讲讲0.99与1.0的区别吗？没研究过 0.99，没比较过，所以不知道

1.0 具体项目中还没用过，所以我给你讲也不太清楚，但是这里能找到你要的答案：
http://s8186255.iteye.com/

一位兄弟写的jstree1.0的几篇技术博文，希望对你能有所帮助。

10 楼 lqixv 2010-06-28  

能讲讲0.99与1.0的区别吗？没研究过 0.99，没比较过，所以不知道

9 楼 ihibernate 2010-06-28  

zqjhyl 写道

有完整的例子么

你的完整代表什么意思？
jstree的全部功能例子？我仅对以上所述做具体研究，其他的还没例子