GridView绝技弹出新页面/制定大小位置新窗口、固定表头(只用CSS)、合并表头多重表头

最新推荐文章于 2025-08-22 15:07:29 发布

yttvclb

最新推荐文章于 2025-08-22 15:07:29 发布

阅读量1.5k

点赞数

文章标签： css asp server javascript object textbox

本文介绍了ASP.NET中GridView组件的多种高级用法，包括弹出新页面、固定表头及合并多重表头等技巧，提供了详细的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

13.GridView弹出新页面/弹出制定大小位置新窗口：

效果图：

方案一：简单的方法，新窗口不固定大小

1<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="3" OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing"

2 OnRowUpdating="GridView1_RowUpdating" OnRowCancelingEdit="GridView1_RowCancelingEdit" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" Font-Size="12px" >

3 <FooterStyle BackColor="White" ForeColor="#000066" />

4 <Columns>

5 <asp:BoundField DataField="身份证号码" HeaderText="编号" ReadOnly="True" />

6 <asp:BoundField DataField="邮政编码" HeaderText="邮政编码" SortExpression="邮政编码" />

7 <asp:BoundField DataField="家庭住址" HeaderText="家庭住址" />

8 <asp:HyperLinkField HeaderText="姓名" Text="姓名" DataNavigateUrlFields="姓名" DataNavigateUrlFormatString="Default6.aspx?GoodsID={0}" Target="mainframe" NavigateUrl="~/Default6.aspx" DataTextField="姓名" ></asp:HyperLinkField>

9 <asp:CommandField HeaderText="选择" ShowSelectButton="True" />

10 <asp:CommandField HeaderText="编辑" ShowEditButton="True" />

11 <asp:CommandField HeaderText="删除" ShowDeleteButton="True" />

12 </Columns>

13 <RowStyle ForeColor="#000066" />

14 <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />

15 <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />

16 <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />

17</asp:GridView>

DataNavigateUrlFields是链接的字段名，DataNavigateUrlFormatString是路径。

方案二：精确控制弹出窗口大小位置
1<asp:HyperLinkColumn DataNavigateUrlField="EmployeeID" DataNavigateUrlFormatString="javascript:varwin=window.open('detail.aspx?ID={0}',null,'width=300,height=200');window.Close();"
2 DataTextField="LastName" HeaderText="LastName"></asp:HyperLinkColumn>

使用的是结合javascript的window.open方法，关于window.open的参数网上有很多帖子，本站也有许多参考

14.GridView固定表头(不用javascript只用CSS!，很好用)：

效果图：

代码：

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2<html xmlns="http://www.w3.org/1999/xhtml" >

3<head runat="server">

4 <title>GridView固定表头清清月儿http://blog.youkuaiyun.com/21aspnet </title>

5 <style>

6 .Freezing

7 {...}{

9 position:relative ;

10 table-layout:fixed;

11 top:expression(this.offsetParent.scrollTop);

12 z-index: 10;

13 }

15 .Freezing th{...}{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px;}

16</style>

17</head>

18<body style="font-size=12px">

19 <form id="form1" runat="server">

20 <div style="overflow-y: scroll; height: 200px;width:300px" id="dvBody">

21 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="3" OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing"

22 OnRowUpdating="GridView1_RowUpdating" OnRowCancelingEdit="GridView1_RowCancelingEdit" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" Font-Size="12px" OnRowCreated="GridView1_RowCreated" >

23 <FooterStyle BackColor="White" ForeColor="#000066" />

24 <Columns>

25 <asp:BoundField DataField="身份证号码" HeaderText="编号" ReadOnly="True" />

26 <asp:BoundField DataField="邮政编码" HeaderText="邮政编码" SortExpression="邮政编码" />

27 <asp:BoundField DataField="家庭住址" HeaderText="家庭住址" />

28 <asp:BoundField DataField="姓名" HeaderText="姓名" />

30 </Columns>

31 <RowStyle ForeColor="#000066" />

32 <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />

33 <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" CssClass="ms-formlabel DataGridFixedHeader"/>

34 <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" CssClass="Freezing"/>

35 </asp:GridView>

36 </div>

37 </form>

38</body>

39</html>

用法：CSS设如上的样式，HeaderStyle加CssClass="Freezing，套住GridView的Div设置高度宽度 <div style="overflow-y: scroll; height: 200px;width:200px" >

15.GridView合并表头多重表头无错完美版（以合并3列3行举例）

效果图：

后台代码：

1using System;

2using System.Data;

3using System.Configuration;

4using System.Web;

5using System.Web.Security;

6using System.Web.UI;

7using System.Web.UI.WebControls;

8using System.Web.UI.WebControls.WebParts;

9using System.Web.UI.HtmlControls;

10using System.Data.SqlClient;

11using System.Drawing;

12public partial class _Default : System.Web.UI.Page

13{

14 SqlConnection sqlcon;

15 SqlCommand sqlcom;

16 string strCon = "Data Source=(local);Database=北风贸易;Uid=sa;Pwd=sa";

17 protected void Page_Load(object sender, EventArgs e)

18 {

19 if (!IsPostBack)

20 {

21 bind();

23 }

24 }

25 protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)

26 {

27 GridView1.EditIndex = e.NewEditIndex;

28 bind();

29 }

30 protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)

31 {

32 sqlcon = new SqlConnection(strCon);

33 string sqlstr = "update 飞狐工作室 set 姓名='"

34 + ((TextBox)(GridView1.Rows[e.RowIndex].Cells[1].Controls[0])).Text.ToString().Trim() + "',家庭住址='"

35 + ((TextBox)(GridView1.Rows[e.RowIndex].Cells[3].Controls[0])).Text.ToString().Trim() + "' where 身份证号码='"

36 + GridView1.DataKeys[e.RowIndex].Value.ToString() + "'";

37 sqlcom=new SqlCommand(sqlstr,sqlcon);

38 sqlcon.Open();

39 sqlcom.ExecuteNonQuery();

40 sqlcon.Close();

41 GridView1.EditIndex = -1;

42 bind();

43 }

44 protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)

45 {

46 GridView1.EditIndex = -1;

47 bind();

48 }

49 public void bind()

50 {

51 string sqlstr = "select top 10 * from 飞狐工作室";

52 sqlcon = new SqlConnection(strCon);

53 SqlDataAdapter myda = new SqlDataAdapter(sqlstr, sqlcon);

54 DataSet myds = new DataSet();

55 sqlcon.Open();

56 myda.Fill(myds, "飞狐工作室");

57 GridView1.DataSource = myds;

58 GridView1.DataKeyNames = new string[] { "身份证号码" };

59 GridView1.DataBind();

60 sqlcon.Close();

61 }

63 //这里就是解决方案

64 protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)

65 {

66 switch (e.Row.RowType)

67 {

68 case DataControlRowType.Header:

69 //第一行表头

70 TableCellCollection tcHeader = e.Row.Cells;

71 tcHeader.Clear();

72 tcHeader.Add(new TableHeaderCell());

73 tcHeader[0].Attributes.Add("rowspan", "3"); //跨Row

74 tcHeader[0].Attributes.Add("bgcolor", "white");

75 tcHeader[0].Text = "";

76 tcHeader.Add(new TableHeaderCell());

77 //tcHeader[1].Attributes.Add("bgcolor", "Red");

78 tcHeader[1].Attributes.Add("colspan", "6"); //跨Column

79 tcHeader[1].Text = "全部信息</th></tr><tr>";

81 //第二行表头

82 tcHeader.Add(new TableHeaderCell());

83 tcHeader[2].Attributes.Add("bgcolor", "DarkSeaGreen");

84 tcHeader[2].Text = "身份证号码";

85 tcHeader.Add(new TableHeaderCell());

86 tcHeader[3].Attributes.Add("bgcolor", "LightSteelBlue");

87 tcHeader[3].Attributes.Add("colspan", "2");

88 tcHeader[3].Text = "基本信息";

89 tcHeader.Add(new TableHeaderCell());

90 tcHeader[4].Attributes.Add("bgcolor", "DarkSeaGreen");

91 tcHeader[4].Text = "福利";

92 tcHeader.Add(new TableHeaderCell());

93 tcHeader[5].Attributes.Add("bgcolor", "LightSteelBlue");

94 tcHeader[5].Attributes.Add("colspan", "2");

95 tcHeader[5].Text = "联系方式</th></tr><tr>";

97 //第三行表头

98 tcHeader.Add(new TableHeaderCell());

99 tcHeader[6].Attributes.Add("bgcolor", "Khaki");

100 tcHeader[6].Text = "身份证号码";

101 tcHeader.Add(new TableHeaderCell());

102 tcHeader[7].Attributes.Add("bgcolor", "Khaki");

103 tcHeader[7].Text = "姓名";

104 tcHeader.Add(new TableHeaderCell());

105 tcHeader[8].Attributes.Add("bgcolor", "Khaki");

106 tcHeader[8].Text = "出生日期";

107 tcHeader.Add(new TableHeaderCell());

108 tcHeader[9].Attributes.Add("bgcolor", "Khaki");

109 tcHeader[9].Text = "薪水";

110 tcHeader.Add(new TableHeaderCell());

111 tcHeader[10].Attributes.Add("bgcolor", "Khaki");

112 tcHeader[10].Text = "家庭住址";

113 tcHeader.Add(new TableHeaderCell());

114 tcHeader[11].Attributes.Add("bgcolor", "Khaki");

115 tcHeader[11].Text = "邮政编码";

116 break;

117 }

118 }

119}

前台：

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3<html xmlns="http://www.w3.org/1999/xhtml" >

4<head runat="server">

5 <title>GridView合并多重表头表头清清月儿http://blog.youkuaiyun.com/21aspnet </title>

6</head>

7<body >

8 <form id="form1" runat="server">

9 <div>

10 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="3" OnRowEditing="GridView1_RowEditing"

11 OnRowUpdating="GridView1_RowUpdating" OnRowCancelingEdit="GridView1_RowCancelingEdit" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" Font-Size="12px" OnRowCreated="GridView1_RowCreated" >

12 <FooterStyle BackColor="White" ForeColor="#000066" />

13 <Columns>

14 <asp:CommandField HeaderText="编辑" ShowEditButton="True" />