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 相关文章推荐
extJs 下拉框联动实现代码
Apr 09 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 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
PHP中动态显示签名和ip原理
2007/03/28 PHP
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
node.js中watch机制详解
2014/11/17 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
python中os模块详解
2016/10/14 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
python中类与对象之间的关系详解
2020/12/16 Python
学校大课间活动方案
2014/01/30 职场文书
新教师培训心得体会
2014/09/02 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
委托书格式范文
2015/01/28 职场文书
小学感恩节活动总结
2015/03/24 职场文书
计划生育工作总结2015
2015/04/03 职场文书
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis