我們有一棵這樣的樹
我們現在要把這棵樹轉化成如下的表格樣式
通過表格我們可以看出,他有三部份,主欄,賓欄,主體,而主欄,是一顆向右展開的樹,賓欄是一顆向下展開的樹,而主體部份則是一個表格
表格的整體布局
主欄
HTML結構
<DIV>
<DIV>
<DIV>李寧DIV>
<DIV></DIV>
</DIV>
<DIV></DIV>
<DIV>
<DIV>鞋/DIV>
<DIV></DIV>
<DIV>上衣DIV>
<DIV></DIV>
</DIV>
<DIV></DIV>
</DIV>
賓欄
HTML結構
<DIV>
<DIV>
<DIV>大區</DIV>
<DIV></DIV>
</DIV>
<DIV></DIV>
<DIV>
<DIV>華北</DIV>
<DIV></DIV>
<DIV>華中</DIV>
<DIV></DIV>
</DIV>
<DIV></DIV>
</DIV>
主體
HTML結構
<DIV>
<DIV>
<DIV>l</DIV>
<DIV></DIV>
</DIV>
<DIV>
</DIV>
</DIV>
其中在HTML中邊框全部采用寬度或高度為1PX的DIV構成
在div布局中,橫向展開采用的屬性是float="left"
我設計的Js類結構圖如下
一個由樹轉化為表格的程序就完成,但是在開發過程中,有時候也碰到一些問題,如效率等,如有哪位對這控件或報表開發方面有興趣的,大家一起交流