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 

评论

8 楼 zqjhyl 2010-06-28  

有完整的例子么

7 楼 ihibernate 2010-06-28  

西门吹牛 写道

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

checkbox 类型的树，要选用jstree的checkbox插件来做了，jstree api讲的有怎么使用，你可以去尝试一下。但是radio好像是没有的。

6 楼 西门吹牛 2010-06-28  

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

5 楼 ihibernate 2010-06-28  

hyj1254 写道

换肤，把图标换掉？有icon属性吧，直接指定就行了啊。

简单的来说就是护皮肤，我这个树有8层，每层都要不同的图标，而且最后一级节点要根据文件的不同换成不同的皮肤，如，.doc，.zip，.jar...etc ,换成对应的类型皮肤 ，估计 要改css了。

4 楼 kjj 2010-06-27  

jstree,1.0后事件处理方式很别扭,叫人莫名奇妙的,而且事件传进的参数也很诡异...................................
-----------------------------------------------------------------------------------
至于那个问性能的,jstree本身使用也不难,你自己测一下就知道了,拿着当作常用的treeview还是没问题的...........不知道但节点下3k+是用在那里,测出来后麻烦跟一下贴...............

3 楼 hyj1254 2010-06-27  

换肤，把图标换掉？有icon属性吧，直接指定就行了啊。

2 楼 ihibernate 2010-06-25  

破碎虚空 写道

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

暂时只考虑实现问题，关于性能问题，以后考虑 使用缓存文件来实现客户端对服务器的访问压力。

1 楼 破碎虚空 2010-06-25  

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