- 浏览: 228806 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
simsunny22:
刚好用到,谢了,嘎嘎
Linux tail 命令详解 -
tk_zhang:
jiangashou 写道能不能给你详细的实例参考的BLOG ...
mysql cluster -
jiangashou:
能不能给你详细的实例
mysql cluster -
问天居士:
非常有用,而且很详细。谢谢了
SSH 连接VirtualBox虚拟机中Ubuntu -
tk_zhang:
lwjlaser 写道我是从google进来的,^_^O(∩_ ...
Ubuntu下的vsftpd配置文件详解
这是一个树形菜单的展示。其功能及其强大,几乎可以提供你对树结构的各种要求。下面,对其简述。
首先,感谢 Ivan
Bozhanov利用JQuery对该组件的开发。同时还要感谢我的技术总监Mr. Lu和网友“漂流瓶”的帮助。
组件目前更新至 v0.9.8 版本,当然,版本还会继续升级,作者试图将它变得更加强大和完美,Ivan Bozhanov在博客中说:“I just thought it would be nice if I posted all my ideas for the upcoming 0.9.9 and see which ones you like, or do not like.”
使用JSTree,需要在文件头写类似如下内容的代码,也就是说,它基于JQuery技术,自然需要jquery.js文件支持,同时 还有css.js和tree_component.js这2个文件做支持以及tree_comopnent.css文件的渲染。
组件目前更新至 v0.9.8 版本,当然,版本还会继续升级,作者试图将它变得更加强大和完美,Ivan Bozhanov在博客中说:“I just thought it would be nice if I posted all my ideas for the upcoming 0.9.9 and see which ones you like, or do not like.”
使用JSTree,需要在文件头写类似如下内容的代码,也就是说,它基于JQuery技术,自然需要jquery.js文件支持,同时 还有css.js和tree_component.js这2个文件做支持以及tree_comopnent.css文件的渲染。
<script src="<%=request.getContextPath() %>/js/jquery-0.9.6.js" type="text/javascript"></script> <script src="<%=request.getContextPath() %>/js/css.js" type="text/javascript"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/js/tree_component.js"></script> <link rel="stylesheet" href="<%=request.getContextPath() %>/css/tree_component.css" />这个树,我们需要给它提供一个容器,如div。
容器内不需要给出内容,<div
id="divForTree"></div>即可。内容会在JSTree被Init的时候来渲染。
PART
A.
来看一个普通的树:
$(function () { $.ajaxSetup({cache:false});//这个是为了树的准确性做的一个缓存区清理的工作 $("#divForTree").tree({//从这里开始初始化JSTree data : { type : "json",//支持如xml等多种类型,这里是获取JSON格式数据源 url : src,//每次获得数据从这个链接 async : true,//动态加载数据 async_data : function (NODE) {//请求数据时带的参数列表,可通过getParameter获得。 return { parent_Id : $(NODE).attr("id") || 0} } }, lang:{ loading:"目录加载中……" //在用户等待数据渲染的时候给出的提示内容,默认为loading }, ui:{//在这个option中设置context来控制JSTree的右键操作,如果在context的visible函数内始终返回false则表示在任何节点的右键都无效。 context:{visible : function (NODE, TREE_OBJ) { return false; }} }, callback : {//响应函数,如节点被选中的onselect,还有onopen,onload,beforeopen等很多可定义内容。 onselect: function(node) { //自定义操作 } } }); });
再看一下JSON的数据吧,可以在后台JAVA程序段获得一个根据实际情况如当前打开节点的ID作为parent_id获取它的子节点List。然后在一个JSP中迭代这个List(这里的迭代利用了Struts2的标签):
<%@ page contentType="text/html; charset=utf-8" %> <%@ taglib prefix="s" uri="/struts-tags" %> [ <s:iterator value="noteslist" > { attributes: { id : ${id} }, data: "${name}" ,state: "closed" } , </s:iterator> ]
PART
B.
现在看一个带有右键操作的树形菜单
$(document).ready(function(){ $.ajaxSetup({cache:false}); $("#browser").tree({ data : { type : "json", url : src, async : true, async_data : function (NODE) { return { parent_Id : $(NODE).attr("id") || 0} } }, lang:{ loading:"目录加载中……" }, rules: { draggable : "all" //这个设置可以使得节点进行拖动操作 }, ui:{ context : [ //自定义右键操作的可操作内容 { id : "create", label : "添加下级目录", //右键弹出菜单的此项操作屏显字样 visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); }, //允许节点被右击时出现操作菜单 icon : "<%=request.getContextPath() %>/css/themes/default/create.png",//右键弹出菜单的此项操作图标 action : function (NODE, TREE_OBJ) { //进行此项操作,将有这个函数事件被响应 } }, "separator"//这个是在两个操作之间画一条分隔线 , { id : "edit", label : "编辑目录信息", visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); }, icon : "<%=request.getContextPath() %>/image/reg2.gif", action : function (NODE, TREE_OBJ) { openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"));}); } }, "separator" , { id : "privilege", label : "设置目录权限", visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); }, icon : "<%=request.getContextPath() %>/css/themes/default/rename.png", action : function (NODE, TREE_OBJ) { openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"));}); } }, "separator", { id : "delete", label : "删除", visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); }, icon : "<%=request.getContextPath() %>/css/themes/default/remove.png", action : function (NODE, TREE_OBJ) { var tree=$.tree_reference("browser"); openWindow('myurl','','',function(){ //下边的.parent()和.refresh()均为v0.9.8版本提供,如果你使用的是其他版本如v0.9.6等,这些将不被支持。 NODE=$(tree.parent(NODE)); if($(NODE).attr("id")==undefined){ tree.refresh(); }else{ TreeRefresh(); } }); } }, "separator", { id : "others", label : "其他操作", visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); }, icon : "<%=request.getContextPath() %>/css/images/cut.png", action : function (NODE, TREE_OBJ) { alert("暂无可提供操作。"); } } ] }, callback : { onselect: function(node) { //(a); } } }); function treeRefresh(nodeid){ var rid=nodeid; var tree=$.tree_reference("browser"); var par_node=tree.parent($("#"+rid)); tree.refresh(par_node); } });
评论
10 楼
ihibernate
2010-06-21
callback : {
beforedata : function(node,tree_obj){
alert($(node).attr("id") + " " + $(node).attr("type"));
return {type : $(node).attr("type"),id : $(node).attr("id") || 0 }; //设置get方式传哪些参数
}
}
如果要是传多个参数,这里beforedata该怎么写?
请问这里的return 里能这样些么?
在IE6下我的参树只能传那个ID值,type却不能传?
什么原因
beforedata : function(node,tree_obj){
alert($(node).attr("id") + " " + $(node).attr("type"));
return {type : $(node).attr("type"),id : $(node).attr("id") || 0 }; //设置get方式传哪些参数
}
}
ihibernate 写道
flysheet 写道
async_data : function (NODE) {//请求数据时带的参数列表,可通过getParameter获得。
return { parent_Id : $(NODE).attr("id") || 0}
}
这样写没用吧,应该在callback的beforedata里写才对吧
return { parent_Id : $(NODE).attr("id") || 0}
}
这样写没用吧,应该在callback的beforedata里写才对吧
如果要是传多个参数,这里beforedata该怎么写?
callback : { beforedata : function(node,tree_obj){ alert($(node).attr("id") + " " + $(node).attr("type")); return {type : $(node).attr("type"),id : $(node).attr("id") || 0 }; //设置get方式传哪些参数 } }
请问这里的return 里能这样些么?
在IE6下我的参树只能传那个ID值,type却不能传?
什么原因
9 楼
ihibernate
2010-06-21
flysheet 写道
async_data : function (NODE) {//请求数据时带的参数列表,可通过getParameter获得。
return { parent_Id : $(NODE).attr("id") || 0}
}
这样写没用吧,应该在callback的beforedata里写才对吧
return { parent_Id : $(NODE).attr("id") || 0}
}
这样写没用吧,应该在callback的beforedata里写才对吧
如果要是传多个参数,这里beforedata该怎么写?
callback : { beforedata : function(node,tree_obj){ alert($(node).attr("id") + " " + $(node).attr("type")); return {type : $(node).attr("type"),id : $(node).attr("id") || 0 }; //设置get方式传哪些参数 } }
请问这里的return 里能这样些么?
在IE6下我的参树只能传那个ID值,type却不能传?
什么原因
8 楼
ihibernate
2010-06-21
flysheet 写道
async_data : function (NODE) {//请求数据时带的参数列表,可通过getParameter获得。
return { parent_Id : $(NODE).attr("id") || 0}
}
这样写没用吧,应该在callback的beforedata里写才对吧
return { parent_Id : $(NODE).attr("id") || 0}
}
这样写没用吧,应该在callback的beforedata里写才对吧
如果要是传多个参数,这里beforedata该怎么写?
beforedata : function(node,tree_obj){ alert($(node).attr("id") + " " + $(node).attr("type")); return {type : $(node).attr("type"),id : $(node).attr("id") || 0 }; //设置get方式传的参数 } 请问这里的return 里能这样些么? 在IE6下我的参树只能传那个ID值,type却不能传? 什么原因?
7 楼
flysheet
2010-05-10
async_data : function (NODE) {//请求数据时带的参数列表,可通过getParameter获得。
return { parent_Id : $(NODE).attr("id") || 0}
}
这样写没用吧,应该在callback的beforedata里写才对吧
return { parent_Id : $(NODE).attr("id") || 0}
}
这样写没用吧,应该在callback的beforedata里写才对吧
6 楼
Kupid
2009-11-04
tk_zhang 写道
Kupid 写道
大哥啊。。。您从我的新浪博客转载,好歹也注明一下吧。。。
=。=
=。=
呵呵,我也忘了在那里转载的,当时看到时候感觉文章写得不错,就转了,不好意思哈!
啊……感觉写得不错吗?那当然了~~~俺的文采。。。
5 楼
tk_zhang
2009-10-23
wang363714266 写道
我想点击树上的某个节点,然后跳转到我想要去的页面,就是Onclick事件,但是我在提供的API里面没有发现这个函数,怎么办?
那个在Jstree中是onselect,你可以在那里面定义你的跳转操作的!
4 楼
wang363714266
2009-10-23
我想点击树上的某个节点,然后跳转到我想要去的页面,就是Onclick事件,但是我在提供的API里面没有发现这个函数,怎么办?
3 楼
tk_zhang
2009-09-25
Kupid 写道
大哥啊。。。您从我的新浪博客转载,好歹也注明一下吧。。。
=。=
=。=
呵呵,我也忘了在那里转载的,当时看到时候感觉文章写得不错,就转了,不好意思哈!
2 楼
Kupid
2009-09-25
大哥啊。。。您从我的新浪博客转载,好歹也注明一下吧。。。
=。=
=。=
1 楼
xoquoxxotil
2009-09-16
我要是把css文件和js文件分开放网页就不出效果,怎么回事?
发表评论
-
Session失效,从IFRAME跳转到别的页面问题
2011-10-22 17:29 2397Session失效,我们需要跳转到登陆界面,可是如果是IFR ... -
js实现弹出层
2010-03-18 16:38 1629下面是一个JavaScript代码实现的弹出层效果 & ... -
JavaScript中左右空格过滤
2009-11-16 22:53 1234去除字符串的左空格 function ltrim(s){ ... -
关于正则表达式 g,m 参数的总结,为了回答“正则表达式(/[^0-9]/g,'')中的"/g"是什么意思?”
2009-09-27 10:39 989为了解答“正则表达式(/[^0-9]/g,'')中的" ... -
什么是JSON?
2009-09-16 17:43 1540JSON(JavaScript Object Notation ... -
JQuery的JSTree(下篇)
2009-09-03 22:57 9581接上篇: PART C. 最后,再介绍一种带有ch ... -
悟透JavaScript
2009-08-23 11:01 1009引子 编程世界里只存在两种基本元素,一个是数据,一个 ... -
Javascript中的数组用法详解
2009-08-19 17:17 3163数组就是由许多名称相同的变量聚集在一起,数组 ... -
JS中的大括号用法
2009-08-17 09:03 2599从 JavaScript 1.2 开始,您可以用对象初始化程序 ...
相关推荐
第一篇文章,具体使用也过去很长时间了,直接贴码: 1.代码中使用json数据格式(直接在页面中组装成的,并非后台组装,具体方法:function _callBack(d)) 2.提供右键菜单及功能实现 3.具有checkbox,提供获取选中...
框架总览及菜单模块的处理,介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局、菜单等内容,本篇继续这一主题,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的使用。...
基本上Jquery的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起来,在初始化时不会发生冲突。 当使用jquery时,推荐使用代码1。 编辑本段事件机制 我们大量使用的事件可能就是button的onclick...
上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一、使用treegrid,需要以下支持 jquery.min.js+jquery.treegrid.min.js 二、...
本篇文章主要介绍了js使用zTree插件实现可拖拽的树示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
心想这个应该是很常见的功能吧,特意google了一下,发现大部分是将的不是js实现的,有些js实现的写的麻烦,干脆自己写一个吧,应该不难的。首先思路是,,让文本点击的时候执行左边‘+’号的事件,查看源码看到,‘+...
本篇文章主要是对jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
Extjs在经过两年的发展,Ext JS从2.0版开始,越来越受用户欢迎,今年,Extjs不但推出3.0版本,而且还推出了Ext Core,准备在Web2.0网站开发中占一席之地,如在 Extjs2.x版本中为人所诟病的速度问题在ExtJs3.0中有所...
日常的开发过程中我们需要经常与“树”打交道,例如公司的组织架构树、服务器的项目归属树,管理后台侧边树等等,本篇文章介绍关于树的两个内容 多功能的前端树插件zTree Django中关于树的model设计 zTree zTree是...
-实际上IE7下所以的回发都慢,原因是客户端的Base64编码速度慢,已经使用encodeURIComponent来代替Base64编码。 -俄语翻译(feedback:vbelyaev)。 +2010-06-30 v2.3.1 -ExtAspNet控件将不在依赖ViewState,...
-增加Accordion和Tree配合使用的示例(other\accordion_tree_run.aspx)。 -修正Panel图标不能显示的BUG(CSS中class名不能有$字符)。 +去除PageLayout控件,此控件可以使用BorderLayout和指定PageManager的...
本篇文章主要介绍了easyui combogrid实现本地模糊搜索过滤多列,非常具有实用价值,需要的朋友可以参考下