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

最新推荐文章于 2024-07-09 16:12:08 发布

红叶飘飞落

最新推荐文章于 2024-07-09 16:12:08 发布

阅读量995

点赞数

分类专栏： .NET编程文章标签： .net .NET .Net gridview表头样式

.NET编程专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<%@ 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[n].style.display = Rows[n].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>

*.aspx.cs文件

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;
}
}

红叶飘飞落

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在GridView表头新增图片实现GridView行折叠展开效果

%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewExpandCollapse.aspx.cs" Inherits="GridViewExpandCollapse" %> > html xmlns="http://www.w3.org/1999/xhtml"> head id="Head1" runat="serve
复制链接

扫一扫