zoukankan
html css js c++ java
ASP.NET 2.0中GridView无限层复杂表头的实现
代码
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
GridView_Title.aspx.cs
"
Inherits
=
"
GridView_GridView_Title
"
%>
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
script
runat
="server"
>
//
计算数据,完全可以从数据看取得
ICollection CreateDataSource( )
{
System.Data.DataTable dt
=
new
System.Data.DataTable();
System.Data.DataRow dr;
dt.Columns.Add(
new
System.Data.DataColumn(
"
学生班级
"
,
typeof
(System.String)));
dt.Columns.Add(
new
System.Data.DataColumn(
"
学生姓名
"
,
typeof
(System.String)));
dt.Columns.Add(
new
System.Data.DataColumn(
"
语文
"
,
typeof
(System.Decimal)));
dt.Columns.Add(
new
System.Data.DataColumn(
"
数学
"
,
typeof
(System.Decimal)));
dt.Columns.Add(
new
System.Data.DataColumn(
"
英语
"
,
typeof
(System.Decimal)));
dt.Columns.Add(
new
System.Data.DataColumn(
"
计算机
"
,
typeof
(System.Decimal)));
for
(
int
i
=
0
; i
<
8
; i
++
)
{
System.Random rd
=
new
System.Random(Environment.TickCount
*
i); ;
dr
=
dt.NewRow();
dr[
0
]
=
"
班级
"
+
i.ToString();
dr[
1
]
=
"
学生
"
+
i.ToString();
dr[
2
]
=
System.Math.Round(rd.NextDouble()
*
100
,
2
);
dr[
3
]
=
System.Math.Round(rd.NextDouble()
*
100
,
2
);
dr[
4
]
=
System.Math.Round(rd.NextDouble()
*
100
,
2
);
dr[
5
]
=
System.Math.Round(rd.NextDouble()
*
100
,
2
);
dt.Rows.Add(dr);
}
System.Data.DataView dv
=
new
System.Data.DataView(dt);
return
dv;
}
protected
void
Page_Load( object sender, EventArgs e )
{
if
(
!
IsPostBack)
{
GridView1.BorderColor
=
System.Drawing.Color.DarkOrange;
GridView1.DataSource
=
CreateDataSource();
GridView1.DataBind();
}
}
protected
void
GridView1_RowCreated( object sender, GridViewRowEventArgs e )
{
if
(e.Row.RowType
==
DataControlRowType.Header)
{
//
创建一个GridViewRow,相当于表格的 TR 一行
GridViewRow rowHeader
=
new
GridViewRow(
0
,
0
, DataControlRowType.Header, DataControlRowState.Normal);
string HeaderBackColor
=
"
#EDEDED
"
;
rowHeader.BackColor
=
System.Drawing.ColorTranslator.FromHtml(HeaderBackColor);
//
实现确定要显示的表头样式,也可以通过计算生成
//
<tr>
//
<td rowspan='2'>关键单元格</td>
//
<td colspan='2'>表头文字</td>
//
<td colspan='2'>表头文字</td>
//
<td>表头文字</td>
//
</tr>
//
<tr bgcolor='#FFF'>
//
<td colspan='2'>表头文字</td>
//
<td rowspan='2'>表头文字</td>
//
<td colspan='2'>表头文字</td>
//
</tr>
//
<tr bgcolor='#FFF'>
//
<td>表头文字</td>
//
<td>表头文字</td>
//
<td>表头文字</td>
//
<td>表头文字</td>
//
<td>表头文字</td>";
//
</tr>
//
上面的样式可以设置斜线
Literal newCells
=
new
Literal();
newCells.Text
=
@
"
表头文字1</th>
<th colspan='2'>表头文字2</th>
<th colspan='2'>表头文字3</th>
<th>表头文字4</th>
</tr>
<tr bgcolor='
"
+
HeaderBackColor
+
"
'>
"
;
newCells.Text
+=
@
"
<th colspan='2'>表头文字5</th>
<th rowspan='2'>表头文字6</th>
<th colspan='2'>表头文字7</th>
</tr>
<tr bgcolor='
"
+
HeaderBackColor
+
"
'>
"
;
newCells.Text
+=
@
"
<th>表头文字8</th>
<th>表头文字9</th>
<th>表头文字10</th>
<th>表头文字11</th>
<th>表头文字12
"
;
TableCellCollection cells
=
e.Row.Cells;
TableHeaderCell headerCell
=
new
TableHeaderCell();
//
下面的属性设置与 <td rowspan='2'>关键单元格</td> 要一致
headerCell.RowSpan
=
2
;
headerCell.Controls.Add(newCells);
rowHeader.Cells.Add(headerCell);
rowHeader.Cells.Add(headerCell);
rowHeader.Visible
=
true
;
//
添加到 GridView1
GridView1.Controls[
0
].Controls.AddAt(
0
, rowHeader);
}
}
protected
void
GridView1_RowDataBound( object sender, GridViewRowEventArgs e )
{
if
(e.Row.RowType
==
DataControlRowType.Header)
{
e.Row.Attributes.Add(
"
style
"
,
"
background:#9999FF;color:#FFFFFF;font-size:14px
"
);
}
else
{
e.Row.Attributes.Add(
"
style
"
,
"
background:#FFF
"
);
}
}
</
script
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
>
为 GridView 添加多层表头
</
title
>
</
head
>
<
body
>
<
form
id
="Form1"
runat
="server"
>
<
asp:GridView
ID
="GridView1"
runat
="server"
CellSpacing
="1"
CellPadding
="3"
Font-Size
="12px"
Width
="600px"
BackColor
="#000000"
BorderWidth
="0"
OnRowDataBound
="GridView1_RowDataBound"
OnRowCreated
="GridView1_RowCreated"
>
</
asp:GridView
>
</
form
>
</
body
>
</
html
>
查看全文
相关阅读:
uni-appios端app白屏问题
vue中倒计时假清除
vue路由守卫
JS函数命名规范
VUE生成二维码
移动端H5之css配置rem
关于在vue中使用ui库样式无法修改的问题
v28 error: resource android:attr/dialogCornerRadius not found.
cocos2d: fullPathForFilename: No file found at script/jsb_prepare.js. Possible missing file
android studio clean show: CreateProcess error=2, 系统找不到指定的文件。
原文地址:https://www.cnblogs.com/puke/p/768781.html
最新文章
1. 未来可能重要的技术 .
scala 如何显示 大数
Spark 分区
hbase 创建多version的表 , 并预分区
Spark 使用 yarn 和 主节点提交
ThreadPoolExecutor 实现固定大小线程池
StringBuffer为何线程安全
Termux oh-my-zsh 下化境下设置全局快捷键(自定义命令)
今天心情不好,于是我断掉了身边所有的WiFi
oh-my-zsh超级终端
热门文章
Linux下的Tmux分屏操作
记vue封装发送请求 获取接口数据并在页面进行数据渲染
Windows中常用的目录环境变量和打开系统程序的命令
Vue实现MakeDown编辑器
vue图片滑动验证
Linux 桌面系统监控工具Conky 显示系统资源信息
使用Java实现静默屏幕截图
推荐几个好用图片无损的压缩工具
使用Git上传代码到Github仓库
了解vue计算属性和methods、watched
Copyright © 2011-2022 走看看