您的位置：首页 > 其它

在GridView表头新增图片实现GridView行折叠展开效果

2012-11-21 09:11 429 查看

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewExpandCollapse.aspx.cs" Inherits="GridViewExpandCollapse" %>
<!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 id="Head1" runat="server">
<title>Expand/Collapse</title>

<script type="text/javascript">
var Grid = null;
var UpperBound = 0;
var LowerBound = 1;
var CollapseImage = 'images/minus.gif';
var ExpandImage = 'images/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
.style.display = Rows
.style.display == '' ? 'none' : '';
if (IsExpanded) n--; else n++;
setTimeout("ToggleRows()", TimeSpan);
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<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="images/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>
</div>
</form>
</body>
</html>

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class GridViewExpandCollapse : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
gvTab.DataSource = GetDataTable();
gvTab.DataBind();
}
}

protected DataTable GetDataTable()
{
DataTable dTable = new DataTable();
DataRow dRow = null;
Random rnd = new Random();
dTable.Columns.Add("n");
dTable.Columns.Add("qbrtn");
dTable.Columns.Add("sqrtn");

for (int n = 1; n <= 10; ++n)
{
dRow = dTable.NewRow();
dRow["n"] = n + ".";
dRow["qbrtn"] = Math.Pow(n, 1D / 3D) + "";
dRow["sqrtn"] = Math.Sqrt(n) + "";
dTable.Rows.Add(dRow);
dTable.AcceptChanges();
}
return dTable;
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

在GridView表头新增图片 实现GridView行折叠展开效果

在GridView表头新增图片实现GridView行折叠展开效果