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自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
PHP 批量删除数据的方法分析
2009/10/30 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
Python中扩展包的安装方法详解
2017/06/14 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Numpy掩码式数组详解
2018/04/17 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
园林设计师自荐信
2013/11/18 职场文书
考博专家推荐信模板
2013/12/02 职场文书
高一政治教学反思
2014/01/28 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
涨价通知怎么写
2015/04/23 职场文书
雷锋观后感
2015/06/10 职场文书
单位工资证明范本
2015/06/12 职场文书
SpringBoot整合Minio文件存储
2022/04/03 Java/Android