jstree的简单解决方案

ihibernate

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

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

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



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

本jstree实现的图片：



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