树形表格

步骤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"，来指定父节点