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 function对象那些迷惑分析
Oct 24 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
使用webpack打包koa2 框架app
Feb 02 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
24式加速你的Python(小结)
2019/06/13 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
应届生求职信范文
2014/05/26 职场文书
工人先进事迹材料
2014/12/26 职场文书