父子表格

原创
2013/06/12 16:42
阅读数 100
父子表格 详细参见http://www.360ui.net

table-18

步骤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"让表格拥有父子表功能,虽然classdetailTable,但仍然保留tableStyle所具有的特性,例如这里设置的useColor useHover useClick参数;

Ø  展开一行后,之前展开的自动收缩;

Ø  点击按钮进行展开和收缩

展开阅读全文
打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部