展开/折叠 GridView 行

• 下载演示应用程序 - 4.03 KB

引言

本文档展示了使用 JavaScript 实现 GridView 行的展开/折叠功能。为了演示此功能，我在 GridView 标题上使用了一个 Image。单击此 Image 时，GridView 的行将连续展开和折叠。

使用 HTML 代码

在 GridView 内部添加一个 TemplateField，并在 TemplateField 的 HeaderTemplate 中放置一个 Image。GridView 的 HTML 代码如下所示

<asp:GridView ID="gvTab" BackColor="WhiteSmoke" runat="server" 
     AutoGenerateColumns="False" GridLines="Vertical" ShowFooter="True">
   <Columns>
      <asp:TemplateField>
         <HeaderStyle Width="25px" />
         <ItemStyle Width="25px" BackColor="White" />
         <HeaderTemplate>
            <asp:Image ID="imgTab" onclick="javascript:Toggle(this);" 
                 runat="server" ImageUrl="~/minus.gif" ToolTip="Collapse" />
         </HeaderTemplate>
      </asp:TemplateField>
      <asp:BoundField HeaderText="n" DataField="n">
         <HeaderStyle Width="25px" />
         <ItemStyle Width="25px" />
      </asp:BoundField>
      <asp:BoundField HeaderText="sqrt(n)" DataField="sqrtn">
         <HeaderStyle Width="150px" />
         <ItemStyle Width="150px" />
      </asp:BoundField>
      <asp:BoundField HeaderText="qbrt(n)" DataField="qbrtn">
         <HeaderStyle Width="150px" />
         <ItemStyle Width="150px" />
      </asp:BoundField>
   </Columns>
   <HeaderStyle Height="25px" Font-Bold="True" BackColor="DimGray" 
                ForeColor="White" HorizontalAlign="Center"
                VerticalAlign="Middle" />
   <RowStyle Height="25px" BackColor="Gainsboro" 
             HorizontalAlign="Center" VerticalAlign="Middle" />
   <AlternatingRowStyle Height="25px" BackColor="LightGray" 
             HorizontalAlign="Center" VerticalAlign="Middle" />
   <FooterStyle BackColor="Gray" />
</asp:GridView>

将一个 onclick 事件附加到 GridView 标题的 Image。

<asp:Image ID="imgTab" onclick="javascript:Toggle(this);" runat="server" 
           ImageUrl="~/minus.gif" ToolTip="Collapse" />

使用 JavaScript 代码

将以下代码放入 script 标签中

<script type="text/javascript">
 var Grid = null;
 var UpperBound = 0;
 var LowerBound = 1;
 var CollapseImage = 'minus.gif';
 var ExpandImage = 'plus.gif';
 var IsExpanded = true;   
 var Rows = null;
 var n = 1;
 var TimeSpan = 25;
        
 window.onload = function()
 {
    Grid = document.getElementById('<%= this.gvTab.ClientID %>');
    UpperBound = parseInt('<%= this.gvTab.Rows.Count %>');
    Rows = Grid.getElementsByTagName('tr');
 }
        
 function Toggle(Image)
 {
    ToggleImage(Image);
    ToggleRows();  
 }    
        
 function ToggleImage(Image)
 {
    if(IsExpanded)
    {
       Image.src = ExpandImage;
       Image.title = 'Expand';
       Grid.rules = 'none';
       n = LowerBound;
             
       IsExpanded = false;
    }
    else
    {
       Image.src = CollapseImage;
       Image.title = 'Collapse';
       Grid.rules = 'cols';
       n = UpperBound;
                
       IsExpanded = true;
    }
 }
        
 function ToggleRows()
 {
    if (n < LowerBound || n > UpperBound)  return;
                            
    Rows[n].style.display = Rows[n].style.display == '' ? 'none' : '';
    if(IsExpanded) n--; else n++;
    setTimeout("ToggleRows()",TimeSpan);
 }
</script>

在上面的代码中，全局变量在 window.onload 事件中初始化。有三种方法：Toggle、ToggleImage 和 ToggleImage。Toggle 方法在单击标题图像时被调用。此方法首先切换标题图像，然后通过调用 ToggleImage 和 ToggleImage 方法切换 GridView 的行。请注意，ToggleRows 方法在这里递归调用，使用 setTimeout 方法。我在这里递归调用它是为了在 GridView 行展开/折叠期间创建一个**动态效果**。

为了在每次递归中产生延迟，每次调用 ToggleRows 方法都会延迟 25 毫秒。您可以根据需要通过更改 TimeSpan 值来更改它。

结论

在本文档中，我使用了 setTimeout 方法来实现平滑的展开/折叠功能。

我已在以下浏览器上测试了此脚本