大概在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)
唉,也說了不少了,都是牢騷的話,希望有心人能吸取教訓看到這些了,就別再走彎路了,看看自己的需求看看這些樹的支持度,量力而行。注:這裏面沒有提及一個或兩個著名的樹控件以及著名的公司的樹控件(比如ext、yui等巨慢語法巨羅嗦引用文件超多超大我就不說了),我覺得沒那麼大必要,省了……(作者:Zexombie,地址:zexombie.iteye.com)
下面附件包括截圖,以及控件文件。希望大家交流……(作者:Zexombie,地址:zexombie.iteye.com)