jquery.jstree 增加节点的双击事件代码


Posted in Javascript onJuly 27, 2010

jsTree 是基于jquery的树插件,支持拖放、复制、删除、快捷键、多选、自定义节点图标、自定义右键菜单、跨页面保存状态等等,总之我想到的它基本上都有了,而且最值得表扬的是它让人感觉一点都不慢哦。

jsTree有节点选择事件,即

.bind("select_node.jstree", function(e, data) { 
//alert(data.rslt.obj.attr("id") + ":" + data.rslt.obj.attr("rel")); 
})

其实我认为它更像是节点的单击事件,因为每次点节点的时候它都会触发,不管之前该节点是否已经被选中。

近日做个文件管理的东东,需要用到节点的双击事件,如双击某个节点打开该节点的编辑页面。
jquery.jstree 增加节点的双击事件代码
jstree虽然有双击事件,但是并非针对节点的,而是你双击树所在区域就会触发,如上图任何一个地方。

离节点双击事件最接近的应该就是节点选择事件,因此又是“照葫芦画瓢”啦。

分析
在第833行 this.get_container() 后是节点的单击事件

.delegate("a", "click.jstree", $.proxy(function (event) { 
event.preventDefault(); 
this.select_node(event.currentTarget, true, event); 
}, this))

同样我再这里插入节点双击事件

.delegate("a", "dblclick.jstree", $.proxy(function(event) { 
event.preventDefault(); 
this.dblclick_node(event.currentTarget, true, event); 
}, this))

接着,我再实现 dblclick_node 方法就可以了。

在第928行找到 select_node 的代码,比较复杂。但里面90%对于双击来说是没有用处的,如处理单选、多选、保存选择结果到cookies等。因此 dblclick_node 方法的实现要比 select_node 简单很多。

dblclick_node: function(obj, check, e) { 
obj = this._get_node(obj); 
if (obj == -1 || !obj || !obj.length) { return false; } 
this.__callback({ "obj": obj }); 
},

OK,就这样了。

使用例子
跟 select_node 用法一样

.bind("dblclick_node.jstree", function(e, data) { 
//alert(data.rslt.obj.attr("id") + ":" + data.rslt.obj.attr("rel")); 
})

改造后的代码下载  /201007/yuanma/jquery.jstree.rar
顺便说说
jstree 跟另一个插件jquery validate 是水火不容的,当两者共存时,jstree虽然也可以构造树出来,但如僵尸一般不能展开。这里mark一个,日后试试能否修改。

作者:Bruce(编程的艺术世界)

Javascript 相关文章推荐
JS 强制设为首页的代码
Jan 31 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
jQuery 表格工具集
Apr 25 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
js实现转动骰子模型
Oct 24 Javascript
基于jsTree的无限级树JSON数据的转换代码
Jul 27 #Javascript
XENON基于JSON变种
Jul 27 #Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 #Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 #Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 #Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 #Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 #Javascript
You might like
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
PHP 中文处理技巧
2010/04/25 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
cakephp常见知识点汇总
2017/02/24 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
accesskey 提交
2006/06/26 Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
Aptana调试javascript图解教程
2009/11/30 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
js获取页面description的方法
2015/05/21 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
python中Mako库实例用法
2020/12/31 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
大学生学业生涯规划
2014/01/05 职场文书
《白鹅》教学反思
2014/04/13 职场文书
质量保证书范本
2014/04/29 职场文书
小学社会实践活动总结
2014/07/03 职场文书
高中同学会活动方案
2014/08/14 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python