- 浏览: 518951 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (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 1517http://a3mao.javaeye.com 上 ... -
jquery好站
2010-11-05 20:05 902http://www.ndoherty.biz/ -
jstree
2010-09-08 09:22 1397jstree 主页 : http://www.jstree.c ... -
JS 动态树 异步加载树 xloadtree WebFXLoadTree
2010-09-06 22:24 2312资料地址: http://webfx.eae.net/dht ... -
dtree demo example
2010-09-01 00:41 1935<html> <head> ... -
dtree 用法
2010-09-01 00:03 1435解压缩dtree.zip 包。 dtree目录下包括这些文件 ... -
dhtmlxtree demo
2010-08-31 23:56 951实例 -
Jquery学习
2010-08-04 14:06 924demo-1 ======页面加载完成后。执行alert(' ... -
jquery Ajaxupload应用
2010-07-21 16:08 11521AjaxUpload Jquery插件AjaxUploa ... -
jquery ui datepicker使用和下载地址
2010-07-21 12:32 4453先堆几个地址: JQuery官方地址:http://jq ... -
jquery ui datepicker使用
2010-07-21 10:13 3754在Web开发中,总会遇 ... -
jquery日历控件
2010-07-21 09:57 6603Jquery日历控件合集 FullCale ... -
jquery实现图片左右滚动类似京东
2010-05-19 08:19 1305附件 -
jquery实现图片左右滚动类似京东
2010-05-17 23:26 3113类似京东图片嗷嗷转! -
dhtmlxTree
2010-05-17 08:19 794html树形菜单
相关推荐
**jsTree 中文文档概述** jsTree 是一个流行的JavaScript库,用于在网页上创建交互式的树状视图。它主要用于组织结构化的数据,如文件系统、数据库目录或自定义项目结构。jsTree 支持多种操作,包括点击、拖放、...
**jsTree API详解** jsTree 是一个流行的JavaScript库,用于创建、操作和展示交互式的HTML树状视图。它提供了一套丰富的API,使得开发者能够方便地实现树形结构的各种功能,如添加、删除、修改节点,以及节点的移动...
**jsTree:构建前端树形结构的利器** jsTree 是一个强大的 JavaScript 库,专用于在 Web 页面上创建交互式的树形结构。它基于纯 JavaScript 编写,无需依赖其他库,因此对于初学者和有经验的开发者来说,都是一个...
**jsTree.v.1.0中文文档** jsTree是一款基于JavaScript的开源库,主要用于创建、操作和展示HTML页面上的树状结构。它适用于构建复杂的交互式界面,如文件管理系统、组织架构图、导航菜单等。jsTree v.1.0是该库的一...
**jsTree 概述** jsTree 是一个基于 JavaScript 的开源库,专为创建交互式的树状视图而设计。它提供了丰富的功能,如动态加载、增删节点、拖放操作等,使得在网页中实现复杂的数据结构展示变得简单。jsTree 支持...
**JsTree 全面解析与实战指南** JsTree 是一个基于 JavaScript 的开源库,用于创建交互式的树形数据结构。这个强大的工具适用于多种用途,包括文件管理、菜单系统、数据可视化等。它提供了丰富的功能,如多选、拖放...
**JSTree:高效处理大数据量的JavaScript树形菜单组件** 在Web开发中,树形菜单是一种常见的数据展示形式,用于组织和展示层次结构的数据。JSTree是一款基于JavaScript的开源库,专为构建功能丰富的交互式树形菜单...
**jstree.min.js** 是一个基于 jQuery 的交互式树形视图插件,它允许在网页中创建和管理结构化的目录或数据展示。这款插件以其轻量级、高度可定制和易于使用的特性而受到开发者们的欢迎。下面将详细介绍 jstree 的...
在移动设备上,为了有效地展示层次结构数据,如文件系统、组织架构或导航菜单,"手机端js tree"成为了一种实用的解决方案。这个技术基于JavaScript,专为智能手机和平板电脑等移动端设备设计,提供了可自定义的树形...
**jsTree:构建交互式目录树的利器** jsTree是一款完全用JavaScript编写的开源库,专为实现跨浏览器的树状视图而设计。它在Web应用中扮演着目录树控件的角色,允许用户以树形结构展示数据,极大地提高了用户体验。...
**jsTree大集合** jsTree是一款强大的JavaScript库,专门用于创建、操作和展示HTML页面中的树状结构。这个“jsTree大集合”很可能是包含了一系列关于jsTree的资源、示例代码、文档以及可能的插件集合,为开发者提供...
**jsTree 与 Java 整合详解** jsTree 是一个流行的 JavaScript 库,用于创建交互式的树状视图。它提供了丰富的功能,如节点的拖放、搜索、上下文菜单等,广泛应用于网站的导航菜单、文件管理器、数据结构展示等领域...
jstree是一个流行的JavaScript库,专门用于在前端创建交互式的树形结构。它适用于构建诸如文件浏览器、组织架构图或层级菜单等应用。这个中文文档详细介绍了jstree的核心功能和API,使得开发者能更容易地理解和使用...
**jsTree动态tree详解** jsTree是一款基于JavaScript的开源库,专门用于构建交互式的树形视图。在网页开发中,树形结构常用于展示层级关系的数据,如目录、组织结构或导航菜单等。jsTree提供了丰富的API和可定制的...
**jsTree 大集合** jsTree 是一个流行的 JavaScript 库,专门用于在 Web 应用程序中创建交互式树形视图。它提供了一个强大的工具集,帮助开发者构建功能丰富的数据展示和操作界面,适用于组织结构、文件系统、菜单...
**JsTree静态例子详解** JsTree是一款基于JavaScript的开源库,专门用于创建、操作和展示树状数据结构。它在Web应用中广泛用于构建可交互的目录结构、文件管理系统或者组织复杂的分类信息。本篇文章将深入探讨如何...
**JsTree 实例使用详解** JsTree 是一个强大的JavaScript库,专为构建交互式的树状视图而设计。它在Web开发中广泛应用于文件管理、菜单系统、组织结构展示等多种场景。JsTree 提供了丰富的功能,如动态加载、节点...
**jsTree:JavaScript实现的树形菜单** jsTree是一款基于JavaScript的开源库,专门用于创建交互式的树形菜单。它提供了丰富的功能和多种定制选项,适用于网页中的数据组织和展示,如导航菜单、文件系统视图或者数据...
**JStree 全面解析** JStree 是一个基于 JavaScript 的开源库,专用于创建交互式的树形数据结构。这个强大的工具支持多种操作,包括拖放、搜索、多选、加载异步数据(AJAX)等,广泛应用于网页中的菜单、文件浏览器...
**jsTree 操作详解** jsTree 是一个基于 jQuery 的开源 JavaScript 库,用于创建交互式的树状视图。它提供了一种优雅的方式来呈现和操作数据结构,尤其适用于构建树形菜单或目录。jsTree 支持多种功能,包括动态...