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