樹形表格

步驟1：引入樹形表格腳本，詳細參見http://www.360ui.net

<!--樹形表格start--> <script type="text/javascript" src="<%=path%>/libs//js/table/treeTable.js"></script> <!--樹形表格end-->

步驟2：構建樹形表格

<table class="treeTable"> <tr> <th width="250">名稱</th> <th width="120">大小</th> <th>備註</th> </tr> <tr id="node-1"> <td><span class="folder">根目錄1</span></td> <td>--</td> <td>備註說明</td> </tr> <tr id="node-2" class="child-of-node-1"> <td><span class="folder">二級目錄1</span></td> <td>--</td> <td>備註說明</td> </tr> <tr id="node-8" class="child-of-node-2"> <td><span class="file">文件1</span></td> <td>52 KB</td> <td>備註說明</td> </tr> <tr id="node-9" class="child-of-node-2"> <td><span class="file">文件2</span></td> <td>4 KB</td> <td>備註說明</td> </tr> <tr id="node-3" class="child-of-node-1"> <td><span class="file">文件3</span></td> <td>4 KB</td> <td>備註說明</td> </tr> <tr id="node-4" class="child-of-node-1"> <td><span class="folder">二級目錄2</span></td> <td>--</td> <td>備註說明</td> </tr> <tr id="node-5" class="child-of-node-4"> <td><span class="file">文件4</span></td> <td>56 KB</td> <td>備註說明</td> </tr> <tr id="node-14"> <td><span class="file">文件5</span></td> <td>4 KB</td> <td>備註說明</td> </tr> <tr id="node-11"> <td><span class="folder">根目錄2</span></td> <td>--</td> <td>備註說明</td> </tr> <tr id="node-12" class="child-of-node-11"> <td><span class="file">文件6</span></td> <td>4 KB</td> <td>備註說明</td> </tr> </table>

代碼解讀

Ø  爲table添加class="treeTable"

Ø  爲每一個tr添加id

Ø  要設置父子關係，經過爲tr添加class=" child-of-XXX"，來指定父節點