javascript樹形菜單(一):Tigra Tree Menu,實現動態資料載入

來源:互聯網
上載者:User

要使用一個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函數中修改。

   

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。