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 相关文章推荐
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
Vue-cli创建项目从单页面到多页面的方法
Sep 20 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 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
用ODBC的分页显示
2006/10/09 PHP
用header 发送cookie的php代码
2007/03/16 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
js资料toString 方法
2007/03/13 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
Python中使用SAX解析xml实例
2014/11/21 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
python僵尸进程产生的原因
2017/07/21 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
python实战教程之自动扫雷
2018/07/13 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
python中import与from方法总结(推荐)
2019/03/21 Python
Python自定义一个异常类的方法
2019/06/27 Python
python with (as)语句实例详解
2020/02/04 Python
python中wheel的用法整理
2020/06/15 Python
浅谈Python 参数与变量
2020/06/20 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
中间件的定义
2016/08/09 面试题
行政人员工作职责
2013/12/05 职场文书
公司企业表扬信
2014/01/11 职场文书
战友聚会邀请函
2014/01/18 职场文书
乔迁之喜主持词
2014/03/27 职场文书
校园环保建议书
2014/05/14 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书