使用平滑动态效果展开/折叠 GridView 列

• 下载示例应用程序 - 4.69 KB

引言

去年，我发表了一篇文章：展开/折叠 GridView 行。在那篇文章中，我描述了使用 JavaScript 和平滑动态效果展开/折叠 GridView 行的实现细节。现在，通过这篇文章，我将演示如何使用 JavaScript 和平滑动态效果来展开和折叠 GridView 的列。

CSS 代码

我为此演示使用了以下 CSS 类。Header 和 Footer CSS 类分别用于 GridView 的标题和页脚行，Row 和 AlternateRow CSS 类分别用于 GridView 的普通行和交替行。Grid CSS 类用于 GridView 的背景。

.Header
{
    background-color:#0053E1;
    color:White;
    font-weight:bold;
    text-align:right;
    vertical-align:middle;
    height:25px;
}
.Footer
{
    background-color:#0053E1;
    height:25px;
}
.Row
{
    background-color:#C1DAEB;
    text-align:right;
    vertical-align:middle;
    height:25px;
}
.AlternateRow
{
    background-color:#7FB4D3;
    text-align:right;
    vertical-align:middle;
    height:25px;
}
.Grid
{
    background-color:White;
}

我将这些 CSS 类放在一个单独的 *StyleSheet.css* 文件中，并在 *Grid.aspx* 页面中附加了它的引用，如下所示

<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css" />

HTML 代码

以下是用于此演示的 GridView 的 HTML 代码。我通过 HeaderStyle、FooterStyle、RowStyle 和 AlternatingRowStyle 分别将 Header、Footer、Row & AlternateRow CSS 类应用于 GridView。Grid CSS 类通过 GridView 的 CssClass 属性应用。 我在 GridView 中使用了 TemplateField 列，并在每个 TemplateField 列的 HeaderTemplate 中放置了一个 Image 控件。

<asp:GridView ID="gvTab" CssClass="Grid" runat="server" AutoGenerateColumns="False"
                                   ShowFooter="True" GridLines="Vertical">
   <Columns>
      <asp:TemplateField>
         <HeaderTemplate>
            <asp:Image ID="imgN" onclick="javascript:Toggle(this,0);" 
			runat="server" ImageUrl="~/Images/minus.gif"
                           	ToolTip="Collapse" ImageAlign="AbsMiddle" />
            <asp:Label ID="lblHeaderN" runat="server" Text="n"></asp:Label>
         </HeaderTemplate>
         <ItemTemplate>
            <asp:Label ID="lblItemN" runat="server" Text='<%# Eval("n") %>'></asp:Label>
         </ItemTemplate>
         <HeaderStyle Width="50px" />
         <ItemStyle Width="50px" />
     </asp:TemplateField>
     <asp:TemplateField>
        <HeaderTemplate>
           <asp:Image ID="imgSqrt" onclick="javascript:Toggle(this,1);" 
		runat="server" ImageUrl="~/Images/minus.gif"
                  	ToolTip="Collapse" ImageAlign="AbsMiddle" />
           <asp:Label ID="lblHeaderSqrt" runat="server" Text="sqrt(n)"></asp:Label>
        </HeaderTemplate>
        <ItemTemplate>
           <asp:Label ID="lblItemSqrt" runat="server" Text='<%# Eval("sqrtn") %>'>
	  </asp:Label>
        </ItemTemplate>
        <HeaderStyle Width="150px" />
        <ItemStyle Width="150px" />
     </asp:TemplateField>
     <asp:TemplateField>
        <HeaderTemplate>
           <asp:Image ID="imgQbrt" onclick="javascript:Toggle(this,2);" 
		runat="server" ImageUrl="~/Images/minus.gif"
           	ToolTip="Collapse" ImageAlign="AbsMiddle" />
           <asp:Label ID="lblHeaderQbrt" runat="server" Text="qbrt(n)"></asp:Label>
        </HeaderTemplate>
        <ItemTemplate>
           <asp:Label ID="lblItemQbrt" runat="server" Text='<%# Eval("qbrtn") %>'>
	  </asp:Label>
        </ItemTemplate>
        <HeaderStyle Width="150px" />
        <ItemStyle Width="150px" />
     </asp:TemplateField>
  </Columns>
  <HeaderStyle CssClass="Header" />
  <RowStyle CssClass="Row" />
  <AlternatingRowStyle CssClass="AlternateRow" />
  <FooterStyle CssClass="Footer" />
</asp:GridView>

附加点击事件

我将 click event 附加到每个 GridView 列的标题 Image 上，如下所示：

<asp:Image ID="imgSqrt" onclick="javascript:Toggle(this,1);" 
	runat="server" ImageUrl="~/Images/minus.gif"
         ToolTip="Collapse" ImageAlign="AbsMiddle" />

页面的 window.onload 事件

我使用 window.onload event 来初始化全局变量。

var Grid = null;
var UpperBound = 0;
var LowerBound = 1;
var CollapseImage = 'Images/minus.gif';
var ExpandImage = 'Images/plus.gif';
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');
}

GridView 的标题 Image 的 Click 事件

每次单击任何一个标题 Image 时，都会调用此 event。此 event 首先切换标题 Image，然后通过调用 ToggleImage 和 ToggleColumns 方法分别切换 GridView 的请求列。

function Toggle(Image, Index)
{
    ToggleImage(Image, Index);  
    ToggleColumns(Image, Index);
}

第一个 argument 是要单击的 Image 的引用，而第二个 argument 是包含特定 Image 的 GridView 的 column 索引。

ToggleImage 方法

此方法从 Toggle 方法调用。此方法的基本功能是切换所选标题 Image 的源和工具提示。

function ToggleImage(Image, Index)
{
    if(Image.IsExpanded == undefined || Image.IsExpanded)
    {
        Image.src = ExpandImage;
        Image.title = 'Expand';
        n = UpperBound;
                
        Image.IsExpanded = false;
    }
    else
    {
        Image.src = CollapseImage;
        Image.title = 'Collapse';
        n = LowerBound;
                
        Image.IsExpanded = true;
    }
}    

ToggleColumns 方法

此方法第一次从 Toggle 方法调用，之后它使用 setTimeout 方法递归地自行调用。我在这里递归地调用它，以便在 GridView 列的展开/折叠期间创建一个**平滑的动态效果**。

为了在每次 recursion 中进行延迟，ToggleColumns 方法的每次调用都延迟了 25 毫秒。您可以根据需要通过更改 TimeSpan 值来设置它。

我在这里使用 JavaScript closure，通过 setTimeout 方法和 arguments 递归地调用 ToggleColumns 方法。

function ToggleColumns(Image, Index)
{
   if (n < LowerBound || n > UpperBound) return;

   var Condition = Rows[n].getElementsByTagName('td')[Index].style.visibility == '';
   Condition = Condition || Rows[n].getElementsByTagName('td')
				[Index].style.visibility = 'visible'; 
   
   Rows[n].getElementsByTagName('td')[Index].style.visibility = 
				Condition ? 'hidden' : 'visible';


   if(Image.IsExpanded) n++; else n--;

   setTimeout(function(){ToggleColumns(Image, Index);},TimeSpan);
}

总结

我切换了 GridView column 的所有 TD 元素的可见性，以便借助 setTimeout 方法通过递归创建一个**平滑的动态效果幻觉**。不同的浏览器具有不同的**展开/折叠 GridView 列**的效果。在 Internet Explorer 7/8、Safari、Google Chrome 和 Opera 中，看起来列正在展开/折叠，而在 Mozilla、Firefox 和 Netscape Navigator 的情况下，看起来列的文本正在展开/折叠。

支持的浏览器

我已经在以下浏览器上测试了此代码

历史

• 2009 年 7 月 4 日 - 发布原始版本