树形表格

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