DIV CSS 佈局教程網

打包下載

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


jstree 跟另一個插件jquery validate 是水火不容的，當兩者共存時，jstree雖然也可以構造樹出來，但如僵屍一般不能展開。這裡mark一個，日後試試能否修改。

作者：Bruce（編程的藝術世界）