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

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

php中文网

发布： 2016-05-16 18:22:20

原创

1797人浏览过

jsTree 是基于jquery的树插件，支持拖放、复制、删除、快捷键、多选、自定义节点图标、自定义右键菜单、跨页面保存状态等等，总之我想到的它基本上都有了，而且最值得表扬的是它让人感觉一点都不慢哦。

jsTree有节点选择事件，即

空心菜的米库

1，对界面进行了美化2，对文件里边相同代码进行了综合3，增加了点击次数统计，并对3次点击以上的域名增加热门字样4，对本站出售和个人出售进行了划分5，增加钻石状态说明6，增加了完整的后台界面7，增加对资料修改功能8，增加回收站，可以任意删除域名、恢复删除域名和永久删除数据9，还有其他的细节大家自己看~10.增加域名证书显示11.域名到期时间采用日历控件形式12.后台登陆添加了验证码功能13.还有很多

查看详情

复制代码代码如下:

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

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

近日做个文件管理的东东，需要用到节点的双击事件，如双击某个节点打开该节点的编辑页面。
jquery.jstree 增加节点的双击事件代码_jquery

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（编程的艺术世界）