jstree的简单解决方案

[b][size=large]jstree王者归来[/size][/b]

[b] jstree王者归来： QQqun 105564508 希望与各位在线交流探讨[/b]
[color=red]写在前面：[/color]

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


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

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

jsTree 的主要功能有：

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

[b]二、JStree的简单用法[/b]

本文所讲的jstree是基于[color=red][size=medium]jstree0.99a[/size][/color]版本进行[color=darkred][b]异步加载tree[/b][/color]的基本用法，截止到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" οnclick="searchnodes()" value="Search" />
		</div>
</div>

[color=red]部分代码的解释：[/color]

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

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

[color=red]beforedata [/color] 它一定是要写在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
				},

[color=red]onselect [/color] 写在回调函数里，这个地方主要是做了一件事，点击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" οnclick="searchnodes()" value="Search" />
</div>

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

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

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


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

本jstree实现的图片：

[img]http://dl.iteye.com/upload/attachment/268531/114ac4e3-2ab5-3ad8-8122-78f0a707b4c2-thumb.jpg[/img]

[color=red] [b]我的json数据格式： 请查看 jsondata.rar [/b] [/color]