DHTMLTree、Dtree和Ztree的學習使用

一、DHTMLTree是樹菜單,允許我們快速開發界面優美,基於Ajax的javascript庫.她允許在線編輯,拖拽,三種狀態(全選、不選、半選),複選框等模式。同時在加載大數據量的時候,仍然可以保持非常高效的速度。

DHTMLTree是一個功能豐富的第三方JavaScript樹菜單,它能夠使用戶快速添加一個外觀非常漂亮的,基於Ajax技術的網頁上的分層樹。樹視圖支持在線節點編輯、現行的拖放功能、三態複選框以及更多功能。由於特殊的技術的使用,使dhtmlxTree能夠快速有效的加載結構龐大的樹。dhtmlxTree具有以下特點:強大的拖拽功能、爲用戶提供豐富的Javascript API、支持Ajax和服務器端集成以及快速執行Javascript樹。

dhtmlxTree介紹及小DEMO:http://www.cnblogs.com/draem0507/archive/2013/02/01/2889317.html

DHTMLTree基礎學習及API:http://www.cnblogs.com/lidabo/archive/2011/11/02/2233468.html

二、DTree是一個易於基於JavaScript的樹形菜單控件,由JavaScript編寫而成。支持無限分級,可以在同一個頁面中放置多個dTree,可以爲每個節點指定不同的圖標。目前免費並且開源。使用簡單,界面製作的也很專業。

三、Ztree 是利用 JQuery 的核心代碼,實現一套能完成大部分常用功能的 Tree 插件

  •  兼容 IE、FireFox、Chrome 等瀏覽器

  •  在一個頁面內可同時生成多個 Tree 實例

  •  支持 JSON 數據

  •  支持一次性靜態生成 和 Ajax 異步加載 兩種方式

  •  支持多種事件響應及反饋

  •  支持 Tree 的節點移動、編輯、刪除

  •  支持任意更換皮膚 / 個性化圖標(依靠css)

  •  支持極其靈活的 checkbox 或 radio 選擇功能

  •  簡單的參數配置實現 靈活多變的功能

 

1 dtree
     dtree是就是一個js的開源樹形組件,使用特別簡單,可以根據標籤打開新的鏈接,自定義顯示圖標等等。優點是功能簡單、實用,但是不支持checkbox,不支持動態增加,刪除節點,移動節點。當然如果可以利用Jquery等其他東西也是可以做到動態添加的,不過這樣添加的代碼就比較多。
參考資料:
     a 官方網站:http://destroydrop.com/javascripts/tree/
     b  http://blog.163.com/prevBlogPerma.do?host=fanxiaoqc@126&srl=331419002010111054056395&mode=prev&fromdm&fromSearch&isFromSearchEngine=yes
2 xtree
     xtree是基於ajax實現的屬性菜單。它可以定製自己的icon和鏈接,xtree是基於對象的,它也是比較簡單的一種樹形結構。與dtree相比,可以動態的增加或者刪除節點,直接有API方法可以提供。
參考資料:
     a 官方網站:http://webfx.eae.net/dhtml/xtree/index.html
3 ExtTree
  ExtTree是一個繼承自Panel的樹狀組件,是EXTJS的一個組件。我們在使用時,直接以對象的方式進行調用。其中ExtJS可以用來開發RIA也即富客戶端的AJAX應用,是一個用javascript寫的,主要用於創建前端用戶界面,是一個與後臺技術無關的前端ajax框架。我們可以在網上找到很多關於ExtJs的學習書籍。
4 E3tree
  E3Tree是E3平臺下用於構造樹形UI(menu,tree,outlookbar)的一個組件。它集成了現有的xtree、exttree和yuitree,能夠在jsf/webwork/strtus/spring mvc 等等框架使用。我們可以通過學習它的參考手冊對它進行系統的學習。
5 zTree
  zTree是一個依靠 jQuery 實現的多功能 “樹插件”,支持選擇框等顯示,動態更改圖標,提供多種事件響應回調,而且異步數據功能強大。相信涉及大型項目或者大量數據時,它的使用將非常方便。
     利用ztree和Dwr框架可以輕鬆的實現後臺數據的異步加載,他們都是利用Ajax進行後臺數據的異步刷新的,頁面不會重新加載,而且速度非常快。可以參考這篇博文http://blog.csdn.net/zxingchao2009/article/details/6563714


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章