- 浏览: 508602 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (299)
- Oracle(pl/sql_Erp_Pro*C) (69)
- 设计模式 (4)
- spring (23)
- ext (17)
- apache开源项目应用 (4)
- jquery (16)
- 生活琐事 (8)
- 下载资源 (23)
- mysql (2)
- Eclipse使用积累 (5)
- 报表类(报表/图表) (13)
- php (4)
- Web多彩文本框 (3)
- json (4)
- jqgrid (2)
- ant (2)
- java算法积累 (8)
- EL表达式/JSTL (4)
- poi (3)
- gwt (2)
- 爬网第一步 (2)
- javascript (17)
- Javaweb (8)
- tomcat (1)
- flex (1)
- Java&DB (3)
- J2SE (7)
- linux (3)
- 数据结构 (1)
- dot net (5)
- struts (1)
- ibatis (1)
- log4j (1)
- 项目管理 (1)
- Java native interface(jni,jacob......) (5)
- applet (1)
- VB.net/C#.net/JNI (20)
- css (1)
- Sqlite (1)
- servlet (1)
- REST (1)
最新评论
-
wenhurena:
能不能给一下解压密码roki.work.2017@gmail. ...
Ebs解体新書と学習資料1 -
liutao1600:
楼主写的太好了,每天学习~~
Spring_MVC(6)测试 -
liutao1600:
太好了,每天学习你的文章~~~
Spring_MVC(3)表单页面处理 -
liutao1600:
学习了,太好了
Spring_MVC(2)控制层处理 -
liutao1600:
学习了~~~
Spring_MVC(1)构建简单web应用
一、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实现的图片:
评论
谢谢
我们有着同样的梦想!
发表评论
-
jqgird
2011-05-31 23:06 1474http://a3mao.javaeye.com 上 ... -
jquery好站
2010-11-05 20:05 843http://www.ndoherty.biz/ -
jstree
2010-09-08 09:22 1354jstree 主页 : http://www.jstree.c ... -
JS 动态树 异步加载树 xloadtree WebFXLoadTree
2010-09-06 22:24 2280资料地址: http://webfx.eae.net/dht ... -
dtree demo example
2010-09-01 00:41 1901<html> <head> ... -
dtree 用法
2010-09-01 00:03 1404解压缩dtree.zip 包。 dtree目录下包括这些文件 ... -
dhtmlxtree demo
2010-08-31 23:56 916实例 -
Jquery学习
2010-08-04 14:06 888demo-1 ======页面加载完成后。执行alert(' ... -
jquery Ajaxupload应用
2010-07-21 16:08 11472AjaxUpload Jquery插件AjaxUploa ... -
jquery ui datepicker使用和下载地址
2010-07-21 12:32 4400先堆几个地址: JQuery官方地址:http://jq ... -
jquery ui datepicker使用
2010-07-21 10:13 3712在Web开发中,总会遇 ... -
jquery日历控件
2010-07-21 09:57 6570Jquery日历控件合集 FullCale ... -
jquery实现图片左右滚动类似京东
2010-05-19 08:19 1277附件 -
jquery实现图片左右滚动类似京东
2010-05-17 23:26 3084类似京东图片嗷嗷转! -
dhtmlxTree
2010-05-17 08:19 771html树形菜单
相关推荐
jsTree中文api文档,js操作树可移动节点 增加修改删除节点.jsTree中文api文档,js操作树可移动节点 增加修改删除节点.
jsTree实例,jsTree实例,jsTree实例
jsTree中文文档,其中包括各种插件中文介绍,提供广大学习jsTree的朋友们
jsTree操作 jsTree插件简介 Web开发使用jsTree实例
jsTree大集合 jsTree大集合 jsTree大集合
jsTree-directive, jsTree的Angular 指令 文档 jstree指令jsTree的Angular 指令文档文档使用 bower 安装$ bower i jstree-directive教程使用 jsTree,Angularjs和Expressjs语言构建一个基于We
jstree 1.0 最新版jstree 1.0 最新版jstree 1.0 最新版jstree 1.0 最新版jstree 1.0 最新版
jstree ajax ddd jstree ajax ddddd jstree ajax dddddd jstree ajax dddddddd ffffff
有关插件jstree的共享,一般的详细jstree更加强大。
jsTree中文文档
JStree需要的jstree.min.js、jstree.js和样式文件
jsTree JAVA例 不懂QQ512120305
jstree实现两张表的一个tree,数据库请根据映射文件自己建,
jsTree大集合,有利于大家共同开发,大家好好学习吧 我们共同一起开发吧
前端树jstree文档,包含详细的jstree常用方法和核心功能,文档为中文文档,便于阅读,简洁易懂。
vakata-jstree-651d32c.zip vakata-jstree-651d32c.zip vakata-jstree-651d32c.zip
jquery树型结构插件jstree-3.3.4版本,多层树结构,动态加载等所需要的插件
jsTree官方文档,demo的显示及方法的说明,不过1.0暂时还没有中文的api
JStree(最全),里面包含了多种的JS树,还有AJAX树,觉得好的,评论一下就行
jsTree大集合(最完整),jsTree大集合(最完整),jsTree大集合(最完整)