快捷導(dǎo)航

jquery.jstree 增加節(jié)點(diǎn)的雙擊事件代碼

更新時(shí)間：2010年07月27日 08:53:27 作者：

本文基于 jsTree 1.0-rc1 版本增加節(jié)點(diǎn)的雙擊事件。

jsTree 是基于jquery的樹(shù)插件，支持拖放、復(fù)制、刪除、快捷鍵、多選、自定義節(jié)點(diǎn)圖標(biāo)、自定義右鍵菜單、跨頁(yè)面保存狀態(tài)等等，總之我想到的它基本上都有了，而且最值得表?yè)P(yáng)的是它讓人感覺(jué)一點(diǎn)都不慢哦。

jsTree有節(jié)點(diǎn)選擇事件，即

復(fù)制代碼代碼如下:

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

其實(shí)我認(rèn)為它更像是節(jié)點(diǎn)的單擊事件，因?yàn)槊看吸c(diǎn)節(jié)點(diǎn)的時(shí)候它都會(huì)觸發(fā)，不管之前該節(jié)點(diǎn)是否已經(jīng)被選中。

近日做個(gè)文件管理的東東，需要用到節(jié)點(diǎn)的雙擊事件，如雙擊某個(gè)節(jié)點(diǎn)打開(kāi)該節(jié)點(diǎn)的編輯頁(yè)面。

jstree雖然有雙擊事件，但是并非針對(duì)節(jié)點(diǎn)的，而是你雙擊樹(shù)所在區(qū)域就會(huì)觸發(fā)，如上圖任何一個(gè)地方。

離節(jié)點(diǎn)雙擊事件最接近的應(yīng)該就是節(jié)點(diǎn)選擇事件，因此又是“照葫蘆畫(huà)瓢”啦。

分析
在第833行 this.get_container() 后是節(jié)點(diǎn)的單擊事件

復(fù)制代碼代碼如下:

 
.delegate("a", "click.jstree", $.proxy(function (event) { 
event.preventDefault(); 
this.select_node(event.currentTarget, true, event); 
}, this)) 

同樣我再這里插入節(jié)點(diǎn)雙擊事件

復(fù)制代碼代碼如下:

 
.delegate("a", "dblclick.jstree", $.proxy(function(event) { 
event.preventDefault(); 
this.dblclick_node(event.currentTarget, true, event); 
}, this)) 

接著，我再實(shí)現(xiàn) dblclick_node 方法就可以了。

在第928行找到 select_node 的代碼，比較復(fù)雜。但里面90%對(duì)于雙擊來(lái)說(shuō)是沒(méi)有用處的，如處理單選、多選、保存選擇結(jié)果到cookies等。因此 dblclick_node 方法的實(shí)現(xiàn)要比 select_node 簡(jiǎn)單很多。

復(fù)制代碼代碼如下:

 
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 用法一樣

復(fù)制代碼代碼如下:

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

改造后的代碼下載 /201007/yuanma/jquery.jstree.rar
順便說(shuō)說(shuō)
jstree 跟另一個(gè)插件jquery validate 是水火不容的，當(dāng)兩者共存時(shí)，jstree雖然也可以構(gòu)造樹(shù)出來(lái)，但如僵尸一般不能展開(kāi)。這里mark一個(gè)，日后試試能否修改。

作者：Bruce（編程的藝術(shù)世界）

您可能感興趣的文章: