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 相关文章推荐
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
ionic2懒加载配置详解
Sep 01 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
js DOM的事件常见操作实例详解
Dec 16 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 数组基础知识小结
2010/08/20 PHP
利用php生成验证码
2017/02/23 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
Python基础中所出现的异常报错总结
2016/11/19 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
高中毕业的自我鉴定
2013/12/09 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
七年级作文之冬景
2019/11/07 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
Golang 实现WebSockets
2022/04/24 Golang