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 相关文章推荐
ejs v9 javascript模板系统
Mar 21 Javascript
基于jquery & json的省市区联动代码
Jun 26 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 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 strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
laravel安装和配置教程
2014/10/29 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
Yii2单元测试用法示例
2016/11/12 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
angular6开发steps步骤条组件
2019/07/04 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
Python异常处理操作实例详解
2018/05/10 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
Django框架模板的使用方法示例
2019/05/25 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
python 错误处理 assert详解
2020/04/20 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
外贸业务员岗位职责
2013/11/24 职场文书
导游的职业规划书范文
2013/12/27 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
单位工作证明格式模板
2014/10/04 职场文书
热情服务标语
2014/10/07 职场文书
看上去很美观后感
2015/06/10 职场文书