|
|
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í)候它都會觸發(fā)，不管之前該節(jié)點(diǎn)是否已經(jīng)被選中。
近日做個文件管理的東東，需要用到節(jié)點(diǎn)的雙擊事件，如雙擊某個節(jié)點(diǎn)打開該節(jié)點(diǎn)的編輯頁面。
jstree雖然有雙擊事件，但是并非針對節(jié)點(diǎn)的，而是你雙擊樹所在區(qū)域就會觸發(fā)，如上圖任何一個地方。
離節(jié)點(diǎn)雙擊事件最接近的應(yīng)該就是節(jié)點(diǎn)選擇事件，因此又是“照葫蘆畫瓢”啦。
分析
在第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%對于雙擊來說是沒有用處的，如處理單選、多選、保存選擇結(jié)果到cookies等。因此 dblclick_node 方法的實(shí)現(xiàn)要比 select_node 簡單很多。
復(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
順便說說
jstree 跟另一個插件jquery validate 是水火不容的，當(dāng)兩者共存時(shí)，jstree雖然也可以構(gòu)造樹出來，但如僵尸一般不能展開。這里mark一個，日后試試能否修改。
作者：Bruce（編程的藝術(shù)世界）
JavaScript技術(shù)：jquery.jstree 增加節(jié)點(diǎn)的雙擊事件代碼，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
