jquery.jstree 增加节点的双击事件代码

 更新时间:2010年07月27日 08:53:27   作者:  
本文基于 jsTree 1.0-rc1 版本增加节点的双击事件。
jsTree 是基于jquery的树插件,支持拖放、复制、删除、快捷键、多选、自定义节点图标、自定义右键菜单、跨页面保存状态等等,总之我想到的它基本上都有了,而且最值得表扬的是它让人感觉一点都不慢哦。

jsTree有节点选择事件,即
复制代码 代码如下:

.bind("select_node.jstree", function(e, data) {
//alert(data.rslt.obj.attr("id") + ":" + data.rslt.obj.attr("rel"));
})


其实我认为它更像是节点的单击事件,因为每次点节点的时候它都会触发,不管之前该节点是否已经被选中。

近日做个文件管理的东东,需要用到节点的双击事件,如双击某个节点打开该节点的编辑页面。

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(编程的艺术世界)

相关文章

  • 基于Jquery的标签智能验证实现代码

    基于Jquery的标签智能验证实现代码

    一直在寻找最快捷方便的信息验证方法,之前自己编过JS版验证但要写很多辅助代码,经过许多次改进,还是觉得太麻烦代码还多,维护起太费尽。
    2010-12-12
  • Javascript jquery css 写的简单进度条控件

    Javascript jquery css 写的简单进度条控件

    很多的时候用户需要等待你“臃肿”的 Javascript 代码处理完成(Web 2.0 的特色)。期间或许加入一个类似于进度条的东西让用户有点“安慰”。这个东西实现起来并不复杂,无非就是获得总的处理条目,然后获得一个百分比,再显示输出。
    2008-03-03
  • jQuery实现渐变弹出层和弹出菜单的方法

    jQuery实现渐变弹出层和弹出菜单的方法

    这篇文章主要介绍了jQuery实现渐变弹出层和弹出菜单的方法,涉及jQuery渐变效果及css显示的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • Jquery实现简单的动画效果代码

    Jquery实现简单的动画效果代码

    Jquery实现简单的动画效果代码,需要的朋友可以参考下
    2012-03-03
  • JQuery使用数组遍历跳出each循环

    JQuery使用数组遍历跳出each循环

    这篇文章主要介绍了JQuery使用数组遍历跳出each循环,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • jQuery Validate验证框架详解(推荐)

    jQuery Validate验证框架详解(推荐)

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。有兴趣的可以了解一下。
    2016-12-12
  • JQuery 学习笔记 选择器之五

    JQuery 学习笔记 选择器之五

    测试代码如下,本例子中设置的着色比较多,哈,都是随便输些数字进去的,感觉这样更容易让大家看到效果,呵,如果我的讲的有哪不好麻烦大家多留言教导下^^
    2009-07-07
  • jquery对dom的操作常用方法整理

    jquery对dom的操作常用方法整理

    jquery对dom的操作包括了对html内容的添加、删除元素/内容、操作CSS等等,本文整理了一些dom操作的常用方法,感兴趣的朋友可以参考下哈
    2013-06-06
  • jquery里的正则表达式说明

    jquery里的正则表达式说明

    根据jquery的注释,其是匹配HTML字符串和ID选择器
    2011-08-08
  • 用jQuery.ajaxSetup实现对请求和响应数据的过滤

    用jQuery.ajaxSetup实现对请求和响应数据的过滤

    本文主要对用jQuery.ajaxSetup实现对请求和响应数据的过滤的过程与方法进行详细全面的实例讲解。具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12

最新评论