樹控件

最近用了不少的javascript做的樹控件,感受頗深啊,有些累了真的。可能是我的需求太多了吧,導致一些樹控件根本無法滿足要求……下面就簡要的說一些樹吧(作者:Zexombie,地址:zexombie.iteye.com

大概在google裏搜了國內外的以下這些樹(太次的不包括):(作者:Zexombie,地址:zexombie.iteye.com

1. tmlx-Tree(作者:Zexombie,地址:zexombie.iteye.com

2. xytree(作者:Zexombie,地址:zexombie.iteye.com

3. mktree(作者:Zexombie,地址:zexombie.iteye.com

4. dtree(作者:Zexombie,地址:zexombie.iteye.com

5. MzTreeView1.0

6. Gurt Tree (作者:Zexombie,地址:zexombie.iteye.com

7. SilverStripe Tree Control(作者:Zexombie,地址:zexombie.iteye.com

8. Morten's JavaScript Tree Menu(作者:Zexombie,地址:zexombie.iteye.com


dhtmlx-tree,
鼎鼎大名,這就不用說了。功能巨全應有盡有(不過高級更能要付費滴)API文檔巨清楚。常用的比如動態添加“xml讀取展開事件用戶自定義屬性等。但是缺點也是最讓人不爽的——巨慢!我才從數據庫裏動態加載了一兩百個節點,竟然要了我56秒!天啊快一分鐘了!生成慢,就連你點擊節點展開的響應速度也慢了,用習慣了dhtmlx-tree後,感覺別的什麼速度都快了……
(作者:Zexombie,地址:zexombie.iteye.com


xytree,國內人做的,很精巧的幾個文件,源代碼及其清晰註釋及其詳細,用起來及其方便以及速度及其快,我從數據庫中取出幾百個幾點只要16毫秒左右……呃,xytree不支持xml好像,只能“addNode()”,可以動態添加,還可以自定義節點屬性。缺點呢,就是不支持遞歸展開事件不支持遞歸的意思就是在一般你從數據庫中數據,在遞歸讀取的過程中,你不能夠一邊讀一邊添加。這個原因呢不好解釋,貌似一個bug,牽扯到你父子addNode()順序的問題。呵呵不過逼於無奈我想了一招兒也能代替這個bug——像生成xml一樣把所有代碼都變成字符串形式,集合起來後統一進行eval()執行……(作者:Zexombie,地址:zexombie.iteye.com
mktree
呢,也叫dhtml-tree,相當爽相當簡單!不用這個那個的,只要你有一定結構的這樣的列表,只需賦予一個class名稱,這個列表就變成一棵樹了!mktree優點呢就是使用巨簡單,速度巨快(因爲簡單沒有一切亂七八糟的功能)。你可以看看那少得可憐的幾行css代碼還有那根手指頭一樣多的js函數,就知道這是一個多麼純粹的樹了……缺點呢也是因爲簡單,樣式上這棵樹只有+/-這樣的東西而沒有我們常見的那種+/-旁邊還有的文件夾icon,文字樣式也只是普通文字形式。功能上呢除非你大動干戈去改代碼,否則你無法動態添加節點,也沒有展開事件,事實上如果你動動腦子鑽個空子在某個tag上加一個onclick事件,你連點擊事件都沒有,樹的鏈接可能也不好弄……呵呵不過這棵樹還是配置了幾個方法滴,比如展開/合併所有節點或單一節點,單一節點展開關閉你得自己找咯可沒有文檔給你啊……(作者:Zexombie,地址:zexombie.iteye.com
Gurt Tree
樣子上很一般,但是呢用起來相當奇怪!加載幾千個節點只需十幾毫秒(不從數據庫取),樣式上也還過得去。支持多樹動態添加等功能。但沒發現“xml讀取或者展開節點功能。但是呢用法很奇怪代碼不太好理解,主要定製的東西全部用一種奇怪的語法在一個tree_cfg.js裏面自己去寫,唉我還得現去分析,不爽……(作者:Zexombie,地址:zexombie.iteye.com
dtree
呢就沒有上面那麼極端了,是個不錯的tree,中等。樣式上還行用戶自由度很大,可以輕鬆得改寫css代碼,js代碼也可以輕鬆根據自己需要改寫,不算太複雜。支持動態添加間接xml讀取,以及點擊事件等,呵呵反正我覺得好多東西都得自己改源碼才實現。因爲這棵樹是公司用的所以我也沒太多計較。文檔也還湊合吧。(作者:Zexombie,地址:zexombie.iteye.com

MzTreeView1.0。哇說起這個就比較厲害了!真的!強烈推薦這個。梅花雪大人也是“閱樹無數”阿,然後吸取了經驗,在速度算法和開發人員使用上都做了極大的改進啊!在他的api文檔裏面還提到了他製作這個tree的思想精髓部分,比如巧妙利用字符串與正則表達式的搭配來代替對象或數組,比如你生成一個節點只需這樣寫:tree.nodes["父節點id_本節點id"] = "text: 標題; url: #;"; 就這樣一個完整的節點就生成了,一句話包括了添加節點、定義屬性等所有事情,最適合從數據庫中取出數據然後動態生成,因爲你只需如上指明父節點和這個節點的id即可,而不用像其他tree那樣還要層層嵌套遞歸循環來添加……樣式上呢直接在你引用tree的頁面中寫style就可以了具體看文檔吧。不好的地方可能是樣式上自由度還不算太高因爲接口不夠全,xml數據形式好像還不支持,我想梅花雪大人會改進的。總結起來:簡單易用、速度快、好看(至少不難看)、思路清晰、五臟俱全。(作者:Zexombie,地址:zexombie.iteye.com
SilverStripe Tree Control
也是一種像mktree那樣讀取的樹,但是呢用起來就麻煩點了還需要定義很多的class名,我渴望從它這兒得到只要比mktree多點功能就好了,可是結果不盡人意,連個能看的文檔都沒有,一個頁面寫幾句介紹的話就算混過去了,失敗……順便說一下,SilverStripe好像主要是做blog程序的,像wordpress一樣的也是php……
Morten's JavaScript Tree Menu
,沒得說了(因爲也不知道說什麼),看樣子功能挺全的最起碼不多不少,速度也挺快的。打開index.html就知道了,文檔巨x全,半顆樹都是API文檔,只是看了那麼一下,翻了一下它引用的文件,我到現在還沒數清楚我一共需要引用多少個文件,一個節點需要寫多少個參數才能生成……還不夠累的呢,唉……
(作者:Zexombie,地址:zexombie.iteye.com
唉,也說了不少了,都是牢騷的話,希望有心人能吸取教訓看到這些了,就別再走彎路了,看看自己的需求看看這些樹的支持度,量力而行。注:這裏面沒有提及一個或兩個著名的樹控件以及著名的公司的樹控件(比如extyui等巨慢語法巨羅嗦引用文件超多超大我就不說了),我覺得沒那麼大必要,省了……(作者:Zexombie,地址:zexombie.iteye.com 下面附件包括截圖,以及控件文件。希望大家交流……(作者:Zexombie,地址:zexombie.iteye.com

原文出處:http://www.iteye.com/topic/148372
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章