jstree 添加双击事件 且 实现双击展开和关闭

转载自：http://www.cnblogs.com/coolcode/archive/2010/07/26/jstree_add_event_for_node_dblclick.html

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

本文基于  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"));
        })



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

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

image

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"));
        })



此外：以上只是实现了双击事件，我们在以上基础上添加展开和关闭事件
$.jstree.plugin("core", {…………………………


_fn : {
init : function () { （1）在此处加入代码var $jstree = this;





（2）将var trgt = $(event.target).parent().find('ins').get(0);
$jstree.toggle_node(trgt);加入到.bind("dblclick.jstree", function (event) { //为树节点添加双击事件

OK!