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实现的下拉和收缩效果示例

    下拉和收缩类似的效果应用非常的频繁,这篇文章主要介绍了jquery实现的下拉和收缩效果,需要的朋友可以参考下
    2014-08-08
  • 10款非常有用的 Ajax 插件分享

    10款非常有用的 Ajax 插件分享

    这篇文章与大家分享的是10款非常有用的 Ajax 插件,有用于图片的,用于分页的,还有用于导航的。这些作者的想法特别新颖,希望你能从中找到自己需要的插件
    2012-03-03
  • jquery multiSelect 多选下拉框

    jquery multiSelect 多选下拉框

    jquery multiSelect 多选下拉框实现挨骂
    2010-07-07
  • jQuery实现的简单手风琴效果示例

    jQuery实现的简单手风琴效果示例

    这篇文章主要介绍了jQuery实现的简单手风琴效果,结合实例形式分析了jQuery基于事件响应、页面元素属性动态操作实现手风琴效果的方法,需要的朋友可以参考下
    2018-08-08
  • jQuery中:reset选择器用法实例

    jQuery中:reset选择器用法实例

    这篇文章主要介绍了jQuery中:reset选择器用法,实例分析了:reset选择器的功能、定义及匹配重置按钮的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板

    jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板

    本文将结合实例讲解如何使用一款基于jQuery的插件——Zclip来实现复制内容到剪贴板的功能。其实IE上有个方法可以实现点击复制,但是由于只是IE独有,所以我们不提倡。而Zclip是利用一个隐藏的flash文件来完成复制的功能,关键是它兼容当前各主流浏览器。
    2015-04-04
  • jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】

    jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】

    这篇文章主要介绍了jQuery插件FusionCharts绘制的2D条状图效果,结合完整实例形式分析了jQuery使用FusionCharts插件绘制2D条状图的具体步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-05-05
  • jQuery结合CSS制作漂亮的select下拉菜单

    jQuery结合CSS制作漂亮的select下拉菜单

    对于我来说,标准的HTML元素(Select)已经让我感到讨厌。它不能够正常的在IE浏览器上显示。还有一点就是他并不仅仅包含简单的文本。本实例将完全摒弃select元素,通过JQuery和CSS来构建DropDown元素。
    2015-05-05
  • 调用HttpHanlder的几种返回方式小结

    调用HttpHanlder的几种返回方式小结

    本篇文章主要是对调用HttpHanlder的几种返回方式进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • jqGrid日期格式的判断示例代码(开始日期与结束日期)

    jqGrid日期格式的判断示例代码(开始日期与结束日期)

    jqGrid日期格式的判断示例代码(开始日期与结束日期)。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11

最新评论