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>

<%@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 : 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 : 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 : 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实现的图片：

 

评论

6 楼 elfasd 2013-03-27  

您好，我用json做出的树在后台设置target传到前台，用js调试工具可以看到<a>标签中已经有了target属性，并且指向我的iframe，但是就是无法在那个iframe中打开界面，每次都是在原界面打开，求教。。。 QQ 659475830.。。

5 楼 w2220533 2012-11-20  

给一下datajson.jsp的内容吗？我一直解析不出来数据。5555。。。。

4 楼 qq478874237 2011-05-19  

发个例子学习下 邮箱 [e-mail]
谢谢

3 楼 Javakeith 2010-12-02  

一般的需求都会是从数据库里查出来，显示到节点上，想文下LZ如果控制父类，和下属级别的关系，如何从数据库里查出来，放到相对应的节点上，希望LZ更深入些！

我们有着同样的梦想！

2 楼 dearzxj 2010-11-22  

我不会在节点上加超链接

1 楼 dearzxj 2010-11-22  

可以发个例子学习一下吗？