- 浏览: 150781 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
aaron0768:
第6行多了个e
解决离开页面前onbeforeunload事件在火狐的兼容并且提交不触发 -
aaron0768:
博主,我直接copy代码运行,跳转没提示~
解决离开页面前onbeforeunload事件在火狐的兼容并且提交不触发 -
hxzm111:
我加了这一段response.addHeader(" ...
birt报表视图区不可用或者已经过期解决办法 -
一剪梅:
请问一下plugins这个怎么设置 ?
jstree的简单解决方案 -
liuyanwei114:
使用你的servlet可以导出成功了,但是导出后的图片背景色是 ...
处理highcharts导出图片出现中文乱码的问题
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不同版本。
代码部分:
部分代码的解释:
本代码可直接作为异步加载tree项目中源码来用,部分功能依用户要求可自行删除。
代码格式以固定形式进行保留即可,部分代码已有注释,在此将不再进行详细阐释。
现对我在jstree异步加载的部分做些说明:
beforedata 它一定是要写在callback函数中的,return的两个参数 "id" 和 "rel" 就是客户端传给服务器端的两个参数值,id 表示节点的nodeid,rel 表示节点的type类型(是root节点,还是folder节点抑或是leaf节点), 服务器端对其进行逻辑处理,把处理结束的数据以json格式的数据返回给客户端,进行下级节点的加载。
当然用户也可以选择传一个参,或者更多。
onselect 写在回调函数里,这个地方主要是做了一件事,点击tree上节点,显示对应树节点的基本信息,分左右两栏两个iframe,总是单击左边树节点时,对右边iframe的src进行处理,以便显示对应的树的详细信息。
说白点就是单击节点的时候总会以已知的属性值,替换掉右边栏iframe的src值。
onsearch ,此函数也是写在callback函数里,此函数主要实现节点查找功能,输入要查找的节点名称,所有匹配条件的节点都会被打开;
本部分代码在jstree的例子中就是这样写的,removeClass,addClass主要为查找到的节点添加显示样式,search("节点名称")就是实现查找功能的函数当然只限于当前树进行节点查找。
但是到现在为止,本树只实现了异步加载树的功能,对异步节点的查找功能还在继续学习之中,另外对jstree的换肤功能也要根据项目的需求进行改进,可对每个节点进行单独换肤的功能。
jstree 简单解决方案之节点换肤:http://www.iteye.com/topic/701859
如果有什么不理解的地方,请给本人留言。我们可以互相交流,共同进步。
对以上功能如添加、删除节点、异步查找节点等的功能以后还会继续进行完善,请继续关注。
本jstree实现的图片:
我的json数据格式: 请查看 jsondata.rar
他那个东西是自己实现的,jstree应该没有radio这个东西吧,你看看jstree的插件库就知道了
checkbox 只要申明插件就可以了,radio是啥,默认就是单选状态啊!!
图片附件
checkbox tree,支持上级选中,下级自动选中,也可以下级选中,所有父级别自动选中
普通树
太好了 这个数功能还是很全的,能否把代码贴出来学习一下
checkbox 只要申明插件就可以了,radio是啥,默认就是单选状态啊!!
图片附件
checkbox tree,支持上级选中,下级自动选中,也可以下级选中,所有父级别自动选中
普通树
单一节点下有3000+的子节点的话(不是说孙子节点,孙子节点可以通过ajax异步请求完成),这样的东西适合用tree表现吗?用户找起来是不是都得眼花了?
如果真有3000+子节点,只能说,这个分类太差,或者根本就不适合用tree来表现
checkbox 只要申明插件就可以了,radio是啥,默认就是单选状态啊!!
1.0 具体项目中还没用过,所以我给你讲也不太清楚,但是这里能找到你要的答案:
http://s8186255.iteye.com/
一位兄弟写的jstree1.0的几篇技术博文,希望对你能有所帮助。
你的完整代表什么意思?
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" onclick="searchnodes()" 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" onclick="searchnodes()" value="Search" /> </div>
onsearch ,此函数也是写在callback函数里,此函数主要实现节点查找功能,输入要查找的节点名称,所有匹配条件的节点都会被打开;
本部分代码在jstree的例子中就是这样写的,removeClass,addClass主要为查找到的节点添加显示样式,search("节点名称")就是实现查找功能的函数当然只限于当前树进行节点查找。
但是到现在为止,本树只实现了异步加载树的功能,对异步节点的查找功能还在继续学习之中,另外对jstree的换肤功能也要根据项目的需求进行改进,可对每个节点进行单独换肤的功能。
jstree 简单解决方案之节点换肤:http://www.iteye.com/topic/701859
如果有什么不理解的地方,请给本人留言。我们可以互相交流,共同进步。
对以上功能如添加、删除节点、异步查找节点等的功能以后还会继续进行完善,请继续关注。
本jstree实现的图片:
我的json数据格式: 请查看 jsondata.rar
评论
28 楼
一剪梅
2015-08-23
请问一下plugins这个怎么设置 ?
27 楼
yvfish
2011-05-06
各位大神,请问哪有jsTree的回调函数列表文档或说明?
26 楼
sage0427
2011-03-17
先下载了...好好研究下...不知道有没有bug...谢谢
25 楼
chenle6188
2011-02-18
我的方案,但是有点点小小问题,大家帮看下:
$("#menuTree").jstree({
//初始化内容,省略。。。
})
//选中要修改图标的节点
.bind("select_node.jstree", function (e, data) {
//能获取图片的URL地址
var bgImg = data.rslt.obj.find("ins").eq(0).css("background-image"));
//类似获取,只需要设置下应该就可以,但是貌似不成功。
data.rslt.obj.find("ins").eq(0).css("background-image","新图标的地址");
})
$("#menuTree").jstree({
//初始化内容,省略。。。
})
//选中要修改图标的节点
.bind("select_node.jstree", function (e, data) {
//能获取图片的URL地址
var bgImg = data.rslt.obj.find("ins").eq(0).css("background-image"));
//类似获取,只需要设置下应该就可以,但是貌似不成功。
data.rslt.obj.find("ins").eq(0).css("background-image","新图标的地址");
})
24 楼
happy7259
2010-08-18
感觉不好用,官方文档 写得耶不怎么好。。
23 楼
weiqiulai
2010-07-15
不支持IE8啊!?晕死
22 楼
forgood
2010-07-11
这种属性结构的js控件很多,关键是看性能怎么样???楼主有测试过吗?
21 楼
suiye007
2010-07-09
嗯,学习。。。。
20 楼
ihibernate
2010-06-30
kjj 写道
我下载了1.0 ,楼上这个radio是怎么弄出来的,我看了官方插件,好像没有这个东西吧
他那个东西是自己实现的,jstree应该没有radio这个东西吧,你看看jstree的插件库就知道了
19 楼
kjj
2010-06-30
我下载了1.0 ,楼上这个radio是怎么弄出来的,我看了官方插件,好像没有这个东西吧
18 楼
西门吹牛
2010-06-29
plghqr 写道
kjj 写道
西门吹牛 写道
怎么实现checkbox和radio,如果不能做这2种树的话,还是很遗憾
checkbox 只要申明插件就可以了,radio是啥,默认就是单选状态啊!!
图片附件
checkbox tree,支持上级选中,下级自动选中,也可以下级选中,所有父级别自动选中
普通树
太好了 这个数功能还是很全的,能否把代码贴出来学习一下
17 楼
lovewaz01
2010-06-29
我刚用JSTREE在项目中做的一个树,右键功能,拖拽,绑定都比较好用,但是它的CHECKBOX实在是没办法说,太难用了,基本上checkbox中所有的实现方法我又重写一便才能使用,而且很多简单而适用的功能都没加进去.我用的是0.99A版本,1.0的可能会好点.
16 楼
plghqr
2010-06-29
kjj 写道
西门吹牛 写道
怎么实现checkbox和radio,如果不能做这2种树的话,还是很遗憾
checkbox 只要申明插件就可以了,radio是啥,默认就是单选状态啊!!
图片附件
checkbox tree,支持上级选中,下级自动选中,也可以下级选中,所有父级别自动选中
普通树
15 楼
plghqr
2010-06-29
破碎虚空 写道
有没有测试过性能如何?单一个节点下有3000+数据时候,表现怎样?
单一节点下有3000+的子节点的话(不是说孙子节点,孙子节点可以通过ajax异步请求完成),这样的东西适合用tree表现吗?用户找起来是不是都得眼花了?
如果真有3000+子节点,只能说,这个分类太差,或者根本就不适合用tree来表现
14 楼
西门吹牛
2010-06-29
既然1.0和0.99差异较大,希望楼主已1.0的讲解为准,学习即将被淘汰的方式不是浪费时间吗?还有希望楼主讲讲如何实现checkbox和radio
13 楼
kjj
2010-06-29
西门吹牛 写道
怎么实现checkbox和radio,如果不能做这2种树的话,还是很遗憾
checkbox 只要申明插件就可以了,radio是啥,默认就是单选状态啊!!
12 楼
SpreadDiaries
2010-06-28
Jstreeview 更易上手
11 楼
ihibernate
2010-06-28
lqixv 写道
能讲讲0.99与1.0的区别吗?没研究过 0.99,没比较过,所以不知道
1.0 具体项目中还没用过,所以我给你讲也不太清楚,但是这里能找到你要的答案:
http://s8186255.iteye.com/
一位兄弟写的jstree1.0的几篇技术博文,希望对你能有所帮助。
10 楼
lqixv
2010-06-28
能讲讲0.99与1.0的区别吗?没研究过 0.99,没比较过,所以不知道
9 楼
ihibernate
2010-06-28
zqjhyl 写道
有完整的例子么
你的完整代表什么意思?
jstree的全部功能例子?我仅对以上所述做具体研究,其他的还没例子
发表评论
-
处理highcharts导出图片出现中文乱码的问题
2012-07-12 15:10 7824使用highcharts的时候,在导 ... -
图片左右滚动插件 ScrollPic.js,无法循环播放
2012-04-30 00:40 1972图片左右滚动插件 ScrollPic.js,无法循环播放 ... -
ajax status 错误定义
2012-03-23 14:41 1168[JS脚本] status 0**:未被始化 status ... -
解决离开页面前onbeforeunload事件在火狐的兼容并且提交不触发
2012-03-12 17:59 10798离开页面前onbeforeunload事件在火狐的兼容并且提交 ... -
my97datepicker 当天日期前或后不能选中
2012-03-07 11:00 3639当天日期后不能选中 <input id=" ... -
Iframe内嵌Cookie传递丢失问题的解决方法
2011-11-10 17:22 3997问题特征: 在系统1中(域名a.com)ifr ... -
birt报表视图区不可用或者已经过期解决办法
2011-11-10 17:19 4354问题 : - 视图区不可用或者已经过期。 org.eclip ... -
Birt日志的级别详解
2011-10-19 16:32 1759问题 :birt运行时后台总是报出警告 但是页面显示正常 ... -
javascript 刷新页面 关闭窗口
2011-03-03 11:51 1465先来看一个简单的例子: 下面以三个页面分别命名为fr ... -
JS关闭窗口弹出新窗口,关闭新窗口时,刷新父窗口,JS代码实现刷新网页,js实现弹出窗口代码收集集萃
2011-03-01 11:04 2025经常上网的朋友可能到过这样一些网站,一进入首页立刻会弹出一个窗 ... -
js frame 框架编程
2011-02-25 11:37 10631 框架编程概述 一个Html 页面可以有一个或多个 ... -
js实现的刷新页面
2011-02-25 11:33 1131用js实现的刷新页面 ... -
jstree 简单解决方案之节点换肤
2010-06-29 17:10 12703jstree王者归来: QQqun 105564508 ...
相关推荐
EdoJS是一个跨浏览器的富客户端界面框架解决方案。它的设计目标是为了让人们用最简单的方式,快速开发出丰富、健壮、高性能的跨浏览器Web应用程序。 EdoJS是使用js开发的,所以它跟服务端平台无关。通过Ajax数据...
您需要将这三个文件添加到您的解决方案中。 他们是, my_tree_directive.js my_tree_directive.css my_tree_template.html重要说明:将my_tree_directive.js中的templateUrl更改为您自己的my_tree_template.html...
jQuery LigerUI 是基于jQuery的一系列UI控件组合,简单而又强大,致力于快速打造Web前端界面解决方案。 因为是前端控件,跟服务器无关,可以适合.net,jsp,php等等web服务器环境。目前全部插件的打包压缩JS只有100K...
EdoJS是一个跨浏览器的富客户端界面框架解决方案。它的设计目标是为了让人们用最简单的方式,快速开发出丰富、健壮、高性能的跨浏览器Web应用程序。 EdoJS是使用JS开发的,所以它跟服务端平台无关。通过Ajax数据...
jQuery LigerUI 是基于jQuery的一系列UI控件组合,简单而又强大,致力于快速打造Web前端界面解决方案。 因为是前端控件,跟服务器无关,可以适合.net,jsp,php等等web服务器环境。目前全部插件的打包压缩JS只有150K...
包含一整套交互和数据展现组件的Web-UI解决方案; 基于portotype的结构设计,便于进行二次开发和扩展; 接口丰富,使用简单,易于创建风格统一、功能全面的富客户端应用; 提供服务器端数据访问组件connector,可以...
目前线上稳定使用已有2年多,丰富的接口,简单明了的调用方式,多个回调函数,让您轻轻松松打造出富有灵活交互的Web前端界面解决方案。组件布局 Layout字体库 Fonts样式 Style组件 Componentspui.ceng.js _ 弹层pui....
[其他类别]JdonFramework开源框架 v5.1 Build20071025_...[其他类别]铭洲网络后台解决方案_ccmingzhou [其他类别]网页中文本框自校验的标签_input [其他类别]网站RSS订阅功能插件RSSMaker JSP版 v1.0_rssmaker_jsp
而且因为简单的解决方案会动摇。 现在它只是一个npm i express-bem和 3 行代码,可以在任何应用程序中使用 bem 块库。插件 bem-tools 制作中间件 enb 制作中间件依赖关系同行v3.0+ TL; 博士快速入门指南。 在你的 ...
用其他语言阅读:, 前言 首先,非常感谢的出色工作 :smiling_face_with... 用户可以采用多种解决方案来构建庞大的组织结构图(请参阅多层或混合布局部分)。 适用于移动设备的支持触摸功能的插件。 CDN 用户可以找到
用于不同业务领域解决方案的轻动态文档对象模型。 实用且可嵌入。 Node.js、MongoDB、全栈 JavaScript - GitHub “心中有数”——史蒂芬柯维 “在你的脑海中想象你目前无法用眼睛看到的东西的能力。它基于所有事物...
一完美的关于请求的目录不存在而需要url重写的解决方案! 在C#中实现MSN消息框的功能 XmlHttp实现无刷新三联动ListBox 鼠标放在一个连接上,会显示图片(类似tooltip) 使用microsoft.web.ui.webcontrols的TabStrip与...
-增加示例(iframe/parent_postback_run3.aspx),如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性,增加CollapseMode, ...
-简单方便,示例可以参考 default.aspx 或者 other\accordion_tree_run.aspx。 +2009-08-14 v2.0.6 -动态生成菜单实例(other\menu_dynamic_run.aspx和other\menu_dynamic2_run.aspx)(feedback:shguo)。 -...
7、网站性能解析:大型网站优化解决方案 8、Linq技术运用 9、水晶报表及图表统计详解 10、log4j 组件介绍 Extjs方面: 1、基于Ext 3.2最新版本录制,各种新特性功能一览无余; 2、透彻阐述Ext Core核心功能、...
[2] 图灵机器人平台具备灵活的多场景整体解决方案[2] ,满足各场景产品的多样化需求[2] 。 主要作用于:帮助页面,主要使用图灵机器人云管理机器人的性能和词汇,能最大力度的帮助用户更好的办理业务,节省平台的...