步骤1:引入父子表脚本
<!--树形表格start--> <script type="text/javascript" src="<%=path%>/libs//js/table/treeTable.js"></script> <!--树形表格end--> |
步骤2:构建父子表
<table class="detailTable" useColor="false" useHover="false" useClick="false"> <tr> <th width="30">操作</th><th width="100">姓名</th><th width="100">性别</th><th>备注</th> </tr> <tr> <td><span class="img_add2 hand" title="点击展开"></span></td><td>张小三</td><td>男</td><td>备注文字</td> </tr> <tr> <td></td> <td colspan="3"> <table class="tableStyle"> <tr> <th>日期</th><th>栏目1</th><th>栏目2</th><th>栏目3</th><th>栏目4</th> </tr> <tr> <td>2010-9-1</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-2</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-3</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-4</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-5</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> </table> </td> </tr>
<tr> <td><span class="img_add2 hand" title="点击展开"></span></td><td>张小三</td><td>男</td><td>备注文字</td> </tr> <tr> <td></td> <td colspan="3"> <table class="tableStyle"> <tr> <th>日期</th><th>栏目1</th><th>栏目2</th><th>栏目3</th><th>栏目4</th> </tr> <tr> <td>2010-9-1</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-2</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-3</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-4</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-5</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> </table> </td> </tr> </table> |
代码解读:
Ø 这里table设置class="detailTable"让表格拥有父子表功能,虽然class为detailTable,但仍然保留tableStyle所具有的特性,例如这里设置的useColor、 useHover、 useClick参数;
Ø 展开一行后,之前展开的自动收缩;
Ø 点击按钮进行展开和收缩