在 GridView 中显示可折叠数据

• 下载源代码 - 90.6 KB

引言

这段代码旨在创建一个高性能的GridView，该GridView具有最小的postback操作，以及一个可折叠的客户端功能，用于显示行中的其他详细信息。

背景

有时，我们需要在GridView行下方显示一些附加的详细信息，例如项目描述或项目详细信息行下方的图像。

我们点击“加号”图像来查看项目的描述。

项目的详细信息显示在行下方。

使用代码

下载源代码，解压并打开网站，尽情享受吧！

<!--GridView Block: -->

    <asp:GridView ID="gvItems" runat="server"
        BackColor="White" 
        BorderColor="#DEDFDE" BorderStyle="Solid" 
        BorderWidth="1px" CellPadding="4" 
        ForeColor="Black" GridLines="Vertical" 
        PageSize="1"  AutoGenerateColumns="False" 
        style="width:100%" DataSourceID="AccessDataSource1"
    >
    <HeaderStyle BackColor="#FF9900" Font-Bold="True" ForeColor="White" />
    <RowStyle BackColor="White" ForeColor="#333333" />        
    <AlternatingRowStyle BackColor="#F2F2F2" ForeColor="#333333" />
    <PagerSettings Position="Top" />
    <PagerStyle BackColor="#E4E4E4" ForeColor="#265CC0" Borderwidth="0px"/>    
     <Columns>
        <asp:TemplateField HeaderText="Item Details">
        <ItemTemplate>
         <table>
         <tr>
         <td>
            <img src="plus.gif" alt="click here to see details" 
                 onclick='ToggleDisplay(<%# Eval("id") %>);' 
                 style="cursor:pointer;height:15px;width:15px" />                 
         </td>         
         <td>
         <p><%# Eval("ItemId") %> </p>
         </td>
         <td>
         <a href="Item.aspx?id=<%# Eval("ItemId") %>"><%# Eval("ItemName") %></a>
         </td>
         <td>
         <%# Eval("price") %>
         </td>
         </tr>
         <tr>
         <td colspan="4">
                <div id='coldiv<%# Eval("id") %>' style="display:none;">
                <asp:Literal runat="server" ID="ltrl" 
                     Text='<%# Eval("ItemDesc") %>'></asp:Literal>
                </div> 
         </td> 
          </tr>
         </table>
         </ItemTemplate>
        </asp:TemplateField>     
     </Columns>    
    </asp:GridView>
Java script:
<script language="JavaScript">
  function ToggleDisplay(id)
  {
    var elem = document.getElementById('coldiv' + id);
    if (elem) 
    {
          if (elem.style.display != 'block') 
      {
        elem.style.display = 'block';
        elem.style.visibility = 'visible';
      } 
      else
      {
        elem.style.display = 'none';
        elem.style.visibility = 'hidden';
      }
    }
  }
</script>

附加信息

相同的概念也可以用于Repeater控件。 但是使用GridView，我们可以更轻松地获得更多功能 - 这就是为什么，尽管速度稍慢，开发人员仍然使用GridView来满足大多数开发需求的原因。