利用样式给DataGrid添加表头固定和列固定
昨天用添加模板列的方法练了个动态添加列，以适应DataGrid列根据数据库变化。用SetRenderMethodDelegate实现表头合并效果。今天看业务实在看不懂，没事之下，找了个模式，实现了表头和列的固定。不用只能用在ＩＥ５以上。
模式如下：
1/**//* Div container to wrap the datagrid */
2div#div-datagrid 
{
3
width: 420px;
4height: 200px;
5overflow: auto;
6scrollbar-base-color:#ffeaff;
7
}
8
9/**//* Locks the left column */
10td.locked, th.locked {
11font-size: 14px;
12font-weight: bold;
13text-align: center;
14background-color: navy;
15color: white;
16border-right: 1px solid silver;
17position:relative;
18cursor: default;
19
left: expression(document.getElementById("div-datagrid").scrollLeft-2); /**//*IE5+ only*/
20}
21
22/**//* Locks table header */
23th {
24font-size: 14px;
25font-weight: bold;
26text-align: center;
27background-color: navy;
28color: white;
29border-right: 1px solid silver;
30position:relative;
31cursor: default;
32top: expression(document.getElementById("div-datagrid").scrollTop-2); /**//*IE5+ only*/
33z-index: 10;
34}
35
36/**//* Keeps the header as the top most item. Important for top left item*/
37th.locked {z-index: 99;}
38
39/**//* DataGrid Item and AlternatingItem Style*/
40.GridRow {font-size: 10pt; color: black; font-family: Arial; background-color:#ffffff; height:35px;}
41.GridAltRow {font-size: 10pt; color: black; font-family: Arial; background-color:#eeeeee; height:35px;}
asp.net Html
1<%@Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="Test1.WebForm1" %>
2<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
3<HTML>
4 <HEAD>
5 <title>WebForm1</title>
6 <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
7 <meta content="C#" name="CODE_LANGUAGE">
8 <meta content="JavaScript" name="vs_defaultClientScript">
9 <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
10 <LINK href="Styles.css" type="text/css" rel="stylesheet">
11 </HEAD>
12 <body>
13 <form id="Form1" method="post" runat="server">
14 <table>
15 <tr>
16 <td>
17 <div id="div-datagrid"><asp:datagrid id="grdMytest" runat="server" AutoGenerateColumns="False">
18 <Columns>
19 <asp:BoundColumn DataField="ProvName" HeaderText="投标人" ItemStyle-Wrap="False"></asp:BoundColumn>
20 </Columns>
21 </asp:datagrid></div>
22 </td>
23 </tr>
24 <tr>
25 <td>
26 <div id="btn">
27 <asp:Button ID="btnOK" Runat="server" Text=" 测 试 "></asp:Button>
28 </div>
29 </td>
30 </tr>
31 </table>
32 </form>
33 </TBODY>
34 </body>
35</HTML>
后台代码：
1using System;
2using System.Collections;
3using System.ComponentModel;
4using System.Data;
5using System.Drawing;
6using System.Web;
7using System.Web.SessionState;
8using System.Web.UI;
9using System.Web.UI.WebControls;
10using System.Web.UI.HtmlControls;
11
12using System.Data.SqlClient;
13using Test1.ItemplateTest;
14
15namespace Test1
16{
17 /**//// <summary>
18 /// WebForm1 的摘要说明。
19
/// </summary>
20 public class WebForm1 : System.Web.UI.Page
21 {
22 protected System.Web.UI.WebControls.Button btnOK;
23 protected System.Web.UI.WebControls.DataGrid grdMytest;
24
25
26 private void Page_Load(object sender, System.EventArgs e)
27 {
28 //添加应答列
29 TemplateColumn tc1 = new TemplateColumn();
30 tc1.ItemTemplate = new CTemplateColLabel("AnserOne");
31 tc1.ItemStyle.Wrap = false;
32 grdMytest.Columns.Add(tc1);
33
34 //添加分数列
35 TemplateColumn tc2=new TemplateColumn();
36 tc2.ItemTemplate=new CTemplateCol("AnserOnePoint");
37 tc2.ItemStyle.Wrap = false;
38 grdMytest.Columns.Add(tc2);
39
40 //添加应答列
41 TemplateColumn tc3 = new TemplateColumn();
42 tc3.ItemTemplate = new CTemplateColLabel("AnserTwo");
43 tc3.ItemStyle.Wrap = false;
44 grdMytest.Columns.Add(tc3);
45
46 //添加分数列
47 TemplateColumn tc4=new TemplateColumn();
48 tc4.ItemTemplate=new CTemplateCol("AnserTwoPoint");
49 tc4.ItemStyle.Wrap = false;
50 grdMytest.Columns.Add(tc4);
51
52 SqlConnection con = new SqlConnection("Persist Security Info=false;Data Source=192.168.0.9;Initial Catalog=TjgpE;User ID=sa;Password=;");
53 SqlDataAdapter da = new SqlDataAdapter("select * from T_NanshouyongTest",con);
54 DataTable dt = new DataTable();
55 da.Fill(dt);
56 grdMytest.DataSource = dt;
57 grdMytest.DataBind();
58 }
59
60 Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
61 override protected void OnInit(EventArgs e)
62 {
63 //
64 // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
65 //
66 InitializeComponent();
67 base.OnInit(e);
68 }
69
70 /**//// <summary>
71 /// 设计器支持所需的方法 - 不要使用代码编辑器修改
72 /// 此方法的内容。
73 /// </summary>
74 private void InitializeComponent()
75 {
76 this.grdMytest.ItemCreated += new System.Web.UI.WebControls.DataGridItemEventHandler(this.grdMytest_ItemCreated);
77 this.grdMytest.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.grdMytest_ItemDataBound);
78 this.btnOK.Click += new System.EventHandler(this.btnOK_Click);
79 this.Load += new System.EventHandler(this.Page_Load);
80
81 }
82 #endregion
83
84 private void grdMytest_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
85 {
86 if(e.Item.ItemType == ListItemType.Header)
87 {
88 e.Item.SetRenderMethodDelegate(new RenderMethod(NewRenderMothodItem));//输出流重定向(按项目)
89 }
90 }
91
92 private void NewRenderMothodItem(HtmlTextWriter writer,Control ctl)
93 {
94 //输出第一行第一列（投标人名称）
95 writer.AddAttribute(HtmlTextWriterAttribute.Rowspan,"2");
96 writer.AddAttribute(HtmlTextWriterAttribute.Class,"locked");
97 writer.AddAttribute(HtmlTextWriterAttribute.Wrap,"false");
98 writer.RenderBeginTag(HtmlTextWriterTag.Th);
99 Label lbl0 = new Label();
100 lbl0.Text = "投标人名称";
101 lbl0.Style.Add("wrap","false");
102 lbl0.RenderControl(writer);
103 writer.RenderEndTag();
104
105 //输出要合并的第一行
106
107 writer.AddAttribute(HtmlTextWriterAttribute.Colspan,"4");
108 writer.RenderBeginTag(HtmlTextWriterTag.Th);
109 Label lbl1 = new Label();
110 lbl1.Text = "资信要求";
111 lbl1.RenderControl(writer);
112 writer.RenderEndTag();
113 //强制结束换行
114 writer.Write("</tr>");
115
116 //添加一行
117 writer.RenderBeginTag(HtmlTextWriterTag.Tr);
118 //添加合并的第二行第一列
119
120 writer.AddAttribute(HtmlTextWriterAttribute.Colspan,"2");
121 writer.RenderBeginTag(HtmlTextWriterTag.Th);
122 Label lbl2 = new Label();
123 lbl2.Text = "问：质保";
124 lbl2.RenderControl(writer);
125 writer.RenderEndTag();
126
127 //添加合并的第二行第二列
128 writer.AddAttribute(HtmlTextWriterAttribute.Colspan,"2");
129 writer.RenderBeginTag(HtmlTextWriterTag.Th);
130 Label lbl3 = new Label();
131 lbl3.Text = "问：售后";
132 lbl3.RenderControl(writer);
133 writer.RenderEndTag();
134
135 }
136 private void grdMytest_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
137 {
138 if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
139 {
140 e.Item.Cells[0].CssClass = "locked";
141 }
142 }
143
144 private void btnOK_Click(object sender, System.EventArgs e)
145 {
146 foreach(DataGridItem item in grdMytest.Items)
147 {
148 TextBox txtPoint = (TextBox)item.FindControl("AnserOnePoint");
149 if(txtPoint != null)
150 {
151 Response.Write("<script>alert('"+txtPoint.Text.Trim()+"')</script>");
152 return;
153 }
154 }
155 }
156 }
157}
模式如下：1
/**//* Div container to wrap the datagrid */2
div#div-datagrid {3
width: 420px;4
height: 200px;5
overflow: auto;6
scrollbar-base-color:#ffeaff;7
}8
9
/**//* Locks the left column */10
td.locked, th.locked {11
font-size: 14px;12
font-weight: bold;13
text-align: center;14
background-color: navy;15
color: white;16
border-right: 1px solid silver;17
position:relative;18
cursor: default; 19
left: expression(document.getElementById("div-datagrid").scrollLeft-2); /**//*IE5+ only*/20
} 21
22
/**//* Locks table header */23
th {24
font-size: 14px;25
font-weight: bold;26
text-align: center;27
background-color: navy;28
color: white;29
border-right: 1px solid silver;30
position:relative;31
cursor: default; 32
top: expression(document.getElementById("div-datagrid").scrollTop-2); /**//*IE5+ only*/33
z-index: 10;34
}35
36
/**//* Keeps the header as the top most item. Important for top left item*/37
th.locked {z-index: 99;}38
39
/**//* DataGrid Item and AlternatingItem Style*/40
.GridRow {font-size: 10pt; color: black; font-family: Arial; background-color:#ffffff; height:35px;}41
.GridAltRow {font-size: 10pt; color: black; font-family: Arial; background-color:#eeeeee; height:35px;}asp.net Html1
<%@Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="Test1.WebForm1" %>2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >3
<HTML>4
<HEAD>5
<title>WebForm1</title>6
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">7
<meta content="C#" name="CODE_LANGUAGE">8
<meta content="JavaScript" name="vs_defaultClientScript">9
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">10
<LINK href="Styles.css" type="text/css" rel="stylesheet">11
</HEAD>12
<body>13
<form id="Form1" method="post" runat="server">14
<table>15
<tr>16
<td>17
<div id="div-datagrid"><asp:datagrid id="grdMytest" runat="server" AutoGenerateColumns="False">18
<Columns>19
<asp:BoundColumn DataField="ProvName" HeaderText="投标人" ItemStyle-Wrap="False"></asp:BoundColumn>20
</Columns>21
</asp:datagrid></div>22
</td>23
</tr>24
<tr>25
<td>26
<div id="btn">27
<asp:Button ID="btnOK" Runat="server" Text=" 测 试 "></asp:Button>28
</div>29
</td>30
</tr>31
</table>32
</form>33
</TBODY>34
</body>35
</HTML>后台代码：1
using System;2
using System.Collections;3
using System.ComponentModel;4
using System.Data;5
using System.Drawing;6
using System.Web;7
using System.Web.SessionState;8
using System.Web.UI;9
using System.Web.UI.WebControls;10
using System.Web.UI.HtmlControls;11
12
using System.Data.SqlClient;13
using Test1.ItemplateTest;14
15
namespace Test116
{17
/**//// <summary>18
/// WebForm1 的摘要说明。19
/// </summary>20
public class WebForm1 : System.Web.UI.Page21
{22
protected System.Web.UI.WebControls.Button btnOK;23
protected System.Web.UI.WebControls.DataGrid grdMytest;24
25
26
private void Page_Load(object sender, System.EventArgs e)27
{28
//添加应答列29
TemplateColumn tc1 = new TemplateColumn();30
tc1.ItemTemplate = new CTemplateColLabel("AnserOne");31
tc1.ItemStyle.Wrap = false;32
grdMytest.Columns.Add(tc1);33
34
//添加分数列35
TemplateColumn tc2=new TemplateColumn();36
tc2.ItemTemplate=new CTemplateCol("AnserOnePoint");37
tc2.ItemStyle.Wrap = false;38
grdMytest.Columns.Add(tc2);39
40
//添加应答列41
TemplateColumn tc3 = new TemplateColumn();42
tc3.ItemTemplate = new CTemplateColLabel("AnserTwo");43
tc3.ItemStyle.Wrap = false;44
grdMytest.Columns.Add(tc3);45
46
//添加分数列47
TemplateColumn tc4=new TemplateColumn();48
tc4.ItemTemplate=new CTemplateCol("AnserTwoPoint"); 49
tc4.ItemStyle.Wrap = false; 50
grdMytest.Columns.Add(tc4); 51
52
SqlConnection con = new SqlConnection("Persist Security Info=false;Data Source=192.168.0.9;Initial Catalog=TjgpE;User ID=sa;Password=;");53
SqlDataAdapter da = new SqlDataAdapter("select * from T_NanshouyongTest",con);54
DataTable dt = new DataTable();55
da.Fill(dt);56
grdMytest.DataSource = dt;57
grdMytest.DataBind();58
}59
60
Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码61
override protected void OnInit(EventArgs e)62
{63
//64
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。65
//66
InitializeComponent();67
base.OnInit(e);68
}69
70
/**//// <summary>71
/// 设计器支持所需的方法 - 不要使用代码编辑器修改72
/// 此方法的内容。73
/// </summary>74
private void InitializeComponent()75
{ 76
this.grdMytest.ItemCreated += new System.Web.UI.WebControls.DataGridItemEventHandler(this.grdMytest_ItemCreated);77
this.grdMytest.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.grdMytest_ItemDataBound);78
this.btnOK.Click += new System.EventHandler(this.btnOK_Click);79
this.Load += new System.EventHandler(this.Page_Load);80
81
}82
#endregion83
84
private void grdMytest_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)85
{86
if(e.Item.ItemType == ListItemType.Header)87
{88
e.Item.SetRenderMethodDelegate(new RenderMethod(NewRenderMothodItem));//输出流重定向(按项目)89
}90
}91
92
private void NewRenderMothodItem(HtmlTextWriter writer,Control ctl)93
{94
//输出第一行第一列（投标人名称）95
writer.AddAttribute(HtmlTextWriterAttribute.Rowspan,"2");96
writer.AddAttribute(HtmlTextWriterAttribute.Class,"locked");97
writer.AddAttribute(HtmlTextWriterAttribute.Wrap,"false");98
writer.RenderBeginTag(HtmlTextWriterTag.Th);99
Label lbl0 = new Label();100
lbl0.Text = "投标人名称";101
lbl0.Style.Add("wrap","false");102
lbl0.RenderControl(writer);103
writer.RenderEndTag();104
105
//输出要合并的第一行106
107
writer.AddAttribute(HtmlTextWriterAttribute.Colspan,"4");108
writer.RenderBeginTag(HtmlTextWriterTag.Th);109
Label lbl1 = new Label();110
lbl1.Text = "资信要求";111
lbl1.RenderControl(writer);112
writer.RenderEndTag();113
//强制结束换行114
writer.Write("</tr>");115
116
//添加一行117
writer.RenderBeginTag(HtmlTextWriterTag.Tr);118
//添加合并的第二行第一列119
120
writer.AddAttribute(HtmlTextWriterAttribute.Colspan,"2");121
writer.RenderBeginTag(HtmlTextWriterTag.Th);122
Label lbl2 = new Label();123
lbl2.Text = "问：质保";124
lbl2.RenderControl(writer);125
writer.RenderEndTag();126
127
//添加合并的第二行第二列 128
writer.AddAttribute(HtmlTextWriterAttribute.Colspan,"2");129
writer.RenderBeginTag(HtmlTextWriterTag.Th);130
Label lbl3 = new Label();131
lbl3.Text = "问：售后";132
lbl3.RenderControl(writer);133
writer.RenderEndTag();134
135
}136
private void grdMytest_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)137
{138
if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)139
{140
e.Item.Cells[0].CssClass = "locked";141
}142
}143
144
private void btnOK_Click(object sender, System.EventArgs e)145
{146
foreach(DataGridItem item in grdMytest.Items)147
{148
TextBox txtPoint = (TextBox)item.FindControl("AnserOnePoint");149
if(txtPoint != null)150
{151
Response.Write("<script>alert('"+txtPoint.Text.Trim()+"')</script>");152
return;153
}154
}155
}156
}157
}两个自定义模板列，如前面的动态生成例子。
.jpg)
