javascript樹形菜單（一）：Tigra Tree Menu，實現動態資料載入

要使用一個javascript的樹菜單，找了個現成的Tigra Tree Menu，看了下效果，還不錯，就打算使用。  http://www.softcomplex.com/products/tigra_tree_menu/

我的需求是根據從伺服器取的資料動態地構建樹結構，Tigra Tree Menu內部實現是用document.write把樹狀結構內容寫到頁面，動態地添加<script/>標籤，document.write會重新開啟一個輸出資料流，直接寫到頁面中，把原來的文檔都刪掉了。

結論：Tigra Tree Menu適合在頁面載入前就知道樹狀結構的內容，然後按照它的documentation直接使用即可，對於動態資料產生菜單，不可直接使用。

一直忘了（也可能是偷懶心理）補充這篇文章，現在補充一下，要實現樹結構動態載入資料，稍微修改一下tree.js的原始碼就行了。

1. 備份原始的tree.js，複製一份命名為mytree.js，在mytree上修改（備份的原因是擔心出錯）

2. 修改tree的toggle函數，原始函數為：this.toggle = function (n_id) {
var o_item = this.a_index[n_id]; o_item.open(o_item.b_opened) };

修改為：

this.toggle = function(n_id) {var o_item = this.a_index[n_id];

`//下面函數的參數o_item.a_config[0]是使用者資料，擷取的sub_items應該是一個數組var sub_items = get_sub_items(o_item.a_config[0]);//loadOffice();o_item.a_config.splice(2,1);//delete one element on position [2]if (sub_items.length > 0) {o_item.a_config = o_item.a_config.concat(sub_items);//o_item.a_config.push("載入中...");for (var i = 0; i < o_item.a_config.length; i++) {

//這裡是構造子樹new tree_item(o_item, i);}o_item.open(o_item.b_opened);} else {Utils.alert_msg(false, "沒有資訊可以顯示");}};

說明：以上為筆者在真實環境中的應用，具體的內容可以按實際情況修改。

3. function tree的最後一段：

for (var i = 0; i < this.a_children.length; i++) {
document.write(this.a_children[i].init());
this.a_children[i].open();
}

直接用document.write寫在html頁面上，一般來說，這段也需要修改（看具體需要要把動態內容渲染到哪兒）。我的環境中修改為：

for (var i = 0; i < this.a_children.length; i++) {
//document.write(this.a_children[i].init());
this.tree_view += this.a_children[i].init();
dom_ele.innerHTML = this.tree_view;
this.a_children[i].open();
}

上面函數第二行的dom_ele是筆者修改了function tree (a_items, a_template, dom_ele) 函數的聲明，具體可以根據情況修改

4. 一般來說，在點擊樹的某個節點時，使用者可能需要觸發自己想要的事件，這個可以在item_select函數中修改。