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

本文介绍了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   {...}
 
8    
 
9   position:relative ; 
10   table-layout:fixed;
11   top:expression(this.offsetParent.scrollTop);   
12   z-index: 10;
13   }
 
14
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="姓名"  />
29                    
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;
  2
using System.Data;
  3
using System.Configuration;
  4
using System.Web;
  5
using System.Web.Security;
  6
using System.Web.UI;
  7
using System.Web.UI.WebControls;
  8
using System.Web.UI.WebControls.WebParts;
  9
using System.Web.UI.HtmlControls;
 10
using System.Data.SqlClient;
 11
using System.Drawing;
 12
public 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();
 
22            
 
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    }

 
62
 
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>";
 
80
 
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>";
 
96
 
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">
 
2
 
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" />
15                    <asp:BoundField DataField="身份证号码" HeaderText="编号" ReadOnly="True" />
16                    <asp:BoundField DataField="姓名" HeaderText="姓名"  />
17                    <asp:BoundField DataField="出生日期" HeaderText="邮政编码"  />
18                     <asp:BoundField DataField="起薪" HeaderText="起薪"  />
19                    <asp:BoundField DataField="家庭住址" HeaderText="家庭住址"  />
20                    <asp:BoundField DataField="邮政编码" HeaderText="邮政编码" />
21                   
22                </Columns>
23                <RowStyle ForeColor="#000066" />
24                <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
25                <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left"  CssClass="ms-formlabel DataGridFixedHeader"/>
26                <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
27            </asp:GridView>
28        </div>
29    </form>
30</body>
31</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值