`

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不同版本。


代码部分:

Js代码 复制代码
  1. <%@page language="java" %>   
  2. <%@page pageEncoding="gb2312"%>   
  3. <script type="text/javascript" src="/commons/jquery/jquery-1.3.2.js"></script>   
  4. <script type="text/javascript" src="/commons/jquery/jquery.tree.js"></script>   
  5. <script type="text/javascript" language="javascript">   
  6.   <!--      
  7.         $(function () {    
  8.             $.ajaxSetup({cache:false});//ajax调用不使用缓存   
  9.             $("#vcsTree").tree({//创建树开始   
  10.                   data : {    
  11.                     type : "json",//类型为json   
  12.                     async : true,//动态操作   
  13.                     opts : {   
  14.                         method : "get"//设置以get方式向服务器提交数据   
  15.                         url : "datajson.jsp"//此页面返回以json标准格式的json数据串   
  16.                     }   
  17.                  },//end data   
  18.                  ui:{   
  19.                      theme_name : "classic" //设置皮肤样式   
  20.                  },   
  21.                  lang:{        
  22.                  loading : "目录加载中……"  //设置节点打开时默认加载显示默认为loading   
  23.              },     
  24.                  types :{   
  25.                     "default" : {   
  26.                         draggable : false //设置节点不可拖拽   
  27.                     }   
  28.                  },   
  29.              callback : {       
  30.                  beforedata : function(node,tree_obj){   
  31.                         return {id : $(node).attr("id") || 0,rel : $(node).attr("rel")};//进行以异步传参    
  32.                 },   
  33.                 onselect : function(node,tree_obj){//节点单击事件   
  34.                          var test = $(node).children("a").attr("href");//获取json串A标签中href属性值   
  35.                          $(parent.document.body).find('#CONTENT_WORK_MAIN').attr('src', test);   
  36.                          //获取点击的A标签的href属性,然后获取右边的iframe对象,然后设置iframe的location   
  37.                 },   
  38.                 onsearch : function(node, tree_obj) {//节点查找功能   
  39.                     tree_obj.container.find(".search").removeClass("search");   
  40.                     node.addClass("search");       
  41.                 }   
  42.             } //end callback           
  43.             });   
  44.         });   
  45.          function searchnodes(){   
  46.             alert("start search");   
  47.            jQuery.tree.focused().search(jQuery('#search_').val());   
  48.          }   
  49.     //-->   
  50. </script>   
  51. <div id="container">    
  52.             <h2 class="title">JsTree</h2>   
  53.             <div id="vcsTree"></div>   
  54.         <div class="source">   
  55.             <input type="text" id="search_" />   
  56.             <input type="button" id="search_op" onclick="searchnodes()" value="Search" />   
  57.         </div>   
  58. </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异步加载的部分做些说明:

Js代码 复制代码
  1. beforedata : function(node,tree_obj){   
  2.         return {id : $(node).attr("id") || 0,rel : $(node).attr("rel")}; //进行以异步传参    
  3. },  
				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格式的数据返回给客户端,进行下级节点的加载。
当然用户也可以选择传一个参,或者更多。

Js代码 复制代码
  1. onselect : function(node,tree_obj){//节点单击事件   
  2.                          var test = $(node).children("a").attr("href");//获取json串A标签中href属性值   
  3.                          $(parent.document.body).find('#CONTENT_WORK_MAIN').attr('src', test);   
  4.                          //获取点击的A标签的href属性,然后获取右边的iframe对象,然后设置iframe的location   
  5.                 },  
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值。

Js代码 复制代码
  1. onsearch : function(node, tree_obj) { //节点查找功能   
  2.    tree_obj.container.find(".search").removeClass("search");   
  3.    node.addClass("search");    
  4. }   
  5. function searchnodes(){   
  6.    jQuery.tree.focused().search(jQuery('#search_').val());   
  7. }   
  8. <div class="source">   
  9.    <input type="text" id="search_" />   
  10.    <input type="button" id="search_op" onclick="searchnodes()" value="Search" />   
  11. </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  
发个例子学习下 邮箱 478874237@qq.com
谢谢
3 楼 Javakeith 2010-12-02  
一般的需求都会是从数据库里查出来,显示到节点上,想文下LZ如果控制父类,和下属级别的关系,如何从数据库里查出来,放到相对应的节点上,希望LZ更深入些!

我们有着同样的梦想!
2 楼 dearzxj 2010-11-22  
我不会在节点上加超链接
1 楼 dearzxj 2010-11-22  
可以发个例子学习一下吗?

相关推荐

    jsTree中文文档

    **jsTree 中文文档概述** jsTree 是一个流行的JavaScript库,用于在网页上创建交互式的树状视图。它主要用于组织结构化的数据,如文件系统、数据库目录或自定义项目结构。jsTree 支持多种操作,包括点击、拖放、...

    jsTree中文api

    **jsTree API详解** jsTree 是一个流行的JavaScript库,用于创建、操作和展示交互式的HTML树状视图。它提供了一套丰富的API,使得开发者能够方便地实现树形结构的各种功能,如添加、删除、修改节点,以及节点的移动...

    使用jsTree实现js树形结构

    **jsTree:构建前端树形结构的利器** jsTree 是一个强大的 JavaScript 库,专用于在 Web 页面上创建交互式的树形结构。它基于纯 JavaScript 编写,无需依赖其他库,因此对于初学者和有经验的开发者来说,都是一个...

    jsTree.v.1.0中文文档

    **jsTree.v.1.0中文文档** jsTree是一款基于JavaScript的开源库,主要用于创建、操作和展示HTML页面上的树状结构。它适用于构建复杂的交互式界面,如文件管理系统、组织架构图、导航菜单等。jsTree v.1.0是该库的一...

    jsTree 很好用的动态加载数

    **jsTree 概述** jsTree 是一个基于 JavaScript 的开源库,专为创建交互式的树状视图而设计。它提供了丰富的功能,如动态加载、增删节点、拖放操作等,使得在网页中实现复杂的数据结构展示变得简单。jsTree 支持...

    JsTree 最详细教程及完整实例

    **JsTree 全面解析与实战指南** JsTree 是一个基于 JavaScript 的开源库,用于创建交互式的树形数据结构。这个强大的工具适用于多种用途,包括文件管理、菜单系统、数据可视化等。它提供了丰富的功能,如多选、拖放...

    JSTree(js写的树形菜单,支持加载10000节点以上)

    **JSTree:高效处理大数据量的JavaScript树形菜单组件** 在Web开发中,树形菜单是一种常见的数据展示形式,用于组织和展示层次结构的数据。JSTree是一款基于JavaScript的开源库,专为构建功能丰富的交互式树形菜单...

    jstree.min.js.zip

    **jstree.min.js** 是一个基于 jQuery 的交互式树形视图插件,它允许在网页中创建和管理结构化的目录或数据展示。这款插件以其轻量级、高度可定制和易于使用的特性而受到开发者们的欢迎。下面将详细介绍 jstree 的...

    手机端js tree

    在移动设备上,为了有效地展示层次结构数据,如文件系统、组织架构或导航菜单,"手机端js tree"成为了一种实用的解决方案。这个技术基于JavaScript,专为智能手机和平板电脑等移动端设备设计,提供了可自定义的树形...

    jstree目录树控件

    **jsTree:构建交互式目录树的利器** jsTree是一款完全用JavaScript编写的开源库,专为实现跨浏览器的树状视图而设计。它在Web应用中扮演着目录树控件的角色,允许用户以树形结构展示数据,极大地提高了用户体验。...

    jsTree大集合

    **jsTree大集合** jsTree是一款强大的JavaScript库,专门用于创建、操作和展示HTML页面中的树状结构。这个“jsTree大集合”很可能是包含了一系列关于jsTree的资源、示例代码、文档以及可能的插件集合,为开发者提供...

    jsTree JAVA例子

    **jsTree 与 Java 整合详解** jsTree 是一个流行的 JavaScript 库,用于创建交互式的树状视图。它提供了丰富的功能,如节点的拖放、搜索、上下文菜单等,广泛应用于网站的导航菜单、文件管理器、数据结构展示等领域...

    jstree中文文档.doc

    jstree是一个流行的JavaScript库,专门用于在前端创建交互式的树形结构。它适用于构建诸如文件浏览器、组织架构图或层级菜单等应用。这个中文文档详细介绍了jstree的核心功能和API,使得开发者能更容易地理解和使用...

    jsTree动态tree

    **jsTree动态tree详解** jsTree是一款基于JavaScript的开源库,专门用于构建交互式的树形视图。在网页开发中,树形结构常用于展示层级关系的数据,如目录、组织结构或导航菜单等。jsTree提供了丰富的API和可定制的...

    jsTree 大集合

    **jsTree 大集合** jsTree 是一个流行的 JavaScript 库,专门用于在 Web 应用程序中创建交互式树形视图。它提供了一个强大的工具集,帮助开发者构建功能丰富的数据展示和操作界面,适用于组织结构、文件系统、菜单...

    JsTree静态例子

    **JsTree静态例子详解** JsTree是一款基于JavaScript的开源库,专门用于创建、操作和展示树状数据结构。它在Web应用中广泛用于构建可交互的目录结构、文件管理系统或者组织复杂的分类信息。本篇文章将深入探讨如何...

    JsTree 实例使用

    **JsTree 实例使用详解** JsTree 是一个强大的JavaScript库,专为构建交互式的树状视图而设计。它在Web开发中广泛应用于文件管理、菜单系统、组织结构展示等多种场景。JsTree 提供了丰富的功能,如动态加载、节点...

    jsTree树形菜单

    **jsTree:JavaScript实现的树形菜单** jsTree是一款基于JavaScript的开源库,专门用于创建交互式的树形菜单。它提供了丰富的功能和多种定制选项,适用于网页中的数据组织和展示,如导航菜单、文件系统视图或者数据...

    JStree(最全)

    **JStree 全面解析** JStree 是一个基于 JavaScript 的开源库,专用于创建交互式的树形数据结构。这个强大的工具支持多种操作,包括拖放、搜索、多选、加载异步数据(AJAX)等,广泛应用于网页中的菜单、文件浏览器...

    jsTree操作 jsTree插件简介

    **jsTree 操作详解** jsTree 是一个基于 jQuery 的开源 JavaScript 库,用于创建交互式的树状视图。它提供了一种优雅的方式来呈现和操作数据结构,尤其适用于构建树形菜单或目录。jsTree 支持多种功能,包括动态...

Global site tag (gtag.js) - Google Analytics