zoukankan      html  css  js  c++  java
  • asp.net的jQuery 表格展开伸缩

    引用

    C#

    C#经验技巧宝典代码的259页实现查看0458光盘11\EX11_15 DataList控件中的数据详细信息。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     <head>
     <title></title>
     <style>
         table { border:0;border-collapse:collapse;}
         td { font:normal 12px/17px Arial;padding:2px;100px;}
         th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;100px;}
         .parent { background:#FFF38F;cursor:pointer;}  /* 偶数行样式*/
         .odd { background:#FFFFEE;} /* 奇数行样式*/
         .selected { background:#FF6500;color:#fff;}
     </style>
     <!--   引入jQuery -->
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
     <script type="text/javascript">
     $(function(){
         $('tr.parent').click(function(){   // 获取所谓的父行
                 $(this)
                     .toggleClass("selected")   // 添加/删除高亮
                     .siblings('.child_'+this.id).toggle();  // 隐藏/显示所谓的子行
         }).click();
     })
     </script>
     </head>
     <body>
         <table>
             <thead>
                 <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
             </thead>
             <tbody>
                 <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
                 <tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
                 <tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
     
                 <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
                 <tr class="child_row_02"><td>王五</td><td>男</td><td>湖南长沙</td></tr>
                 <tr class="child_row_02"><td>找六</td><td>男</td><td>浙江温州</td></tr>
     
                 <tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
                 <tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
                 <tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
             </tbody>
         </table>
     </body>
     </html>
    

     通过此例子,想像asp.net中的Repeater做成展开伸缩的功能,想要点击每行展开伸缩当前行的详细信息,则必需通过每行的不同class或者ID来区别,那么在表格生成的时候,就要生成不同的class或者ID

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    
    <script>
        $(document).ready(function () {
            $("tr").click(function () {   // 获取所谓的父行
                $("#pp" + this.id).toggle(1000);
                //                 .toggleClass("selected")   // 添加/删除高亮
                //               alert(this.id);
                //                 .siblings("#pp" + this.id).toggle();  // 隐藏/显示所谓的子行
    
                //         }).click();
            });
        });
    </script>
    
    
    
        </head>
    <body>
        <form id="form1" runat="server">
    
        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
        <HeaderTemplate>
    <table border="1" width="100%">
    <tr>
    <th>orderno</th>
    <th>product_no</th>
    <th>color</th>
    <th>product_size</th>
    <th>product_class</th>
    
    </tr>
    </HeaderTemplate>
    
    <ItemTemplate>
    <p>
    <tr id="<%#Eval("orderno") %>">
    <td><table><tr><td><p id="ppp">★</p></td><td><%#Eval("orderno")%></td></tr></table></td>
    <td><%#Eval("product_no")%></td>
    <td><%#Eval("color")%></td>
    <td><%#Eval("product_size")%></td>
    <td><%#Eval("product_class")%></td>
    </tr>
    <tr id="pp<%#Eval("orderno") %>">
    <td colspan="5">
    <%#Eval("brand") %>
    </td>
    </tr>
    </p>
    </ItemTemplate>
    
    <FooterTemplate>
    </table>
    </FooterTemplate>
        </asp:Repeater>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:shopConnectionString %>" 
            SelectCommand="SELECT top 50  [orderno], [out_trade_no], [product_class], [brand], [product_no], [product_size], [color], [number], [price], [isems] FROM [tbl_order] order by id desc ">
        </asp:SqlDataSource>
        <br />
        <asp:Button ID="Button4" runat="server" Text="Button" />
        </form>
    </body>
    </html>
    
  • 相关阅读:
    关于XCode5打开工程闪退的一种解决方案
    【转】iOS应用崩溃日志揭秘
    Cocos2d-X中字符串的处理
    【转】不要把大脑当做磁盘
    【ybt金牌导航6-3-2】区间计数(分块)(二分)
    【luogu P3807】【模板】卢卡斯定理/Lucas 定理(含 Lucas 定理证明)
    【ybt金牌导航6-2-2】【luogu CF600E】树上众数 / Lomsat gelral(树上启发式合并)
    【ybt金牌导航6-1-5】最大割(线段树分治)(线性基)
    【luogu CF1100F】Ivan and Burgers
    【ybt金牌导航8-1-4】【luogu P4151】路径最大异或和 / 最大XOR和路径
  • 原文地址:https://www.cnblogs.com/xiaofengfeng/p/2946045.html
Copyright © 2011-2022 走看看