利用样式给DataGrid添加表头固定和列固定

最新推荐文章于 2021-11-24 21:01:55 发布

weixin_34319374

最新推荐文章于 2021-11-24 21:01:55 发布

阅读量539

点赞数

文章标签： ui javascript c# ViewUI

昨天用添加模板列的方法练了个动态添加列，以适应DataGrid列根据数据库变化。用SetRenderMethodDelegate实现表头合并效果。今天看业务实在看不懂，没事之下，找了个模式，实现了表头和列的固定。不用只能用在ＩＥ５以上。

模式如下：
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

/**//* 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

/**//* Locks table header */
23

{
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

/**//* Keeps the header as the top most item. Important for top left item*/
37

th.locked

{z-index: 99;}
38

/**//* 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

<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

using System.Data.SqlClient;
13

using Test1.ItemplateTest;
14

namespace 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

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

//添加分数列
35

TemplateColumn tc2=new TemplateColumn();
36

tc2.ItemTemplate=new CTemplateCol("AnserOnePoint");
37

tc2.ItemStyle.Wrap = false;
38

grdMytest.Columns.Add(tc2);
39

//添加应答列
41

TemplateColumn tc3 = new TemplateColumn();
42

tc3.ItemTemplate = new CTemplateColLabel("AnserTwo");
43

tc3.ItemStyle.Wrap = false;
44

grdMytest.Columns.Add(tc3);
45

//添加分数列
47

TemplateColumn tc4=new TemplateColumn();
48

tc4.ItemTemplate=new CTemplateCol("AnserTwoPoint");
49

tc4.ItemStyle.Wrap = false;
50

grdMytest.Columns.Add(tc4);
51

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

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

/**//// <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

}
82

#endregion
83

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

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

}

两个自定义模板列，如前面的动态生成例子。

weixin_34319374

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用样式给DataGrid添加表头固定和列固定

昨天用添加模板列的方法练了个动态添加列，以适应DataGrid列根据数据库变化。用SetRenderMethodDelegate实现表头合并效果。今天看业务实在看不懂，没事之下，找了个模式，实现了表头和列的固定。不用只能用在ＩＥ５以上。模式如下： 1/**//* Div container to wrap the datagrid */ 2div#div-datagrid { 3width: ...
复制链接

扫一扫