在企業(yè)管理系統(tǒng)以及大型網(wǎng)站系統(tǒng)中,經(jīng)常用到樹型結(jié)構(gòu),其實樹型結(jié)構(gòu)已經(jīng)非常成熟了,有很多解決方案.
下面貼一下我從幾年前就開始使用的樹型結(jié)構(gòu)的圖.
下面的圖都是使用WebFx 的樹控件做成的,當(dāng)然自己加了很多東西,在FireFox,IE下都可以工作
WebFx提供了兩種Tree,下面的例子主要是使用了XTree,還有另外一種是XLoadTree.
更多詳細(xì)信息請瀏覽 http://webfx.eae.net/dhtml/xloadtree/xloadtree.html 和 http://webfx.eae.net/dhtml/xtree/index.html
不過作者已經(jīng)很久沒有更新這個控件了,雖然網(wǎng)站上很多其他控件還在更新 http://webfx.eae.net
1.普通列表樹
支持無限多級節(jié)點
節(jié)點可以有鏈接,或者沒有
節(jié)點可以設(shè)置支持Html,以支持css等
預(yù)先展開或者關(guān)閉
展開時在裝載顯示(大數(shù)量時使用,不過未經(jīng)全面測試)
2.多選樹
父子節(jié)點都可以被選擇
父子節(jié)點設(shè)置是否有有效值
父節(jié)點選中:設(shè)置是否選擇子節(jié)點
預(yù)先展開選中的值
顯示文字和實際值不同
顯示文字和實際文字可以不同
3.單選樹
只要是valueNode,則都可以被選擇
(其他同多選)
以上三種都是使用同一個js控件做的,只是設(shè)置數(shù)據(jù)時有所不同.