实现方法就是给单元格填充我们想要的格式代码。
c#
<%@ page language="c#" autoeventwireup="true" %>
<!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>
vb.net
<%@ page language="vb" autoeventwireup="true" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<script runat="server">
function createdatasource() as icollection
dim dt as system.data.datatable = new system.data.datatable
dim dr as system.data.datarow
dt.columns.add(new system.data.datacolumn("学生班级", gettype(system.string)))
dt.columns.add(new system.data.datacolumn("学生姓名", gettype(system.string)))
dt.columns.add(new system.data.datacolumn("语文", gettype(system.decimal)))
dt.columns.add(new system.data.datacolumn("数学", gettype(system.decimal)))
dt.columns.add(new system.data.datacolumn("英语", gettype(system.decimal)))
dt.columns.add(new system.data.datacolumn("计算机", gettype(system.decimal)))
dim i as integer = 0
while i < 8
dim rd as system.random = 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.math.min(system.threading.interlocked.increment(i), i - 1)
end while
dim dv as system.data.dataview = new system.data.dataview(dt)
return dv
end function
protected sub page_load(byval sender as object, byval e as eventargs)
if not ispostback then
gridview1.bordercolor = system.drawing.color.darkorange
gridview1.datasource = createdatasource()
gridview1.databind()
end if
end sub
protected sub gridview1_rowcreated(byval sender as object, byval e as gridviewroweventargs)
if e.row.rowtype = datacontrolrowtype.header then
dim rowheader as gridviewrow = new gridviewrow(0, 0, datacontrolrowtype.header, datacontrolrowstate.normal)
dim headerbackcolor as string = "#ededed"
rowheader.backcolor = system.drawing.colortranslator.fromhtml(headerbackcolor)
dim newcells as literal = new literal
newcells.text = "表头文字1</th>" + _
" <th colspan='2'>表头文字2</th>" + _
" <th colspan='2'>表头文字3</th>" + _
" <th>表头文字4</th>" + _
" </tr>" + _
" <tr bgcolor='" + headerbackcolor + "'>" + _
" <th colspan='2'>表头文字5</th>" + _
" <th rowspan='2'>表头文字6</th>" + _
" <th colspan='2'>表头文字7</th>" + _
" </tr>" + _
" <tr bgcolor='" + headerbackcolor + "'>" + _
" <th>表头文字8</th>" + _
" <th>表头文字9</th>" + _
" <th>表头文字10</th>" + _
" <th>表头文字11</th>" + _
" <th>表头文字12"
dim cells as tablecellcollection = e.row.cells
dim headercell as tableheadercell = new tableheadercell
headercell.rowspan = 2
headercell.controls.add(newcells)
rowheader.cells.add(headercell)
rowheader.cells.add(headercell)
rowheader.visible = true
gridview1.controls(0).controls.addat(0, rowheader)
end if
end sub
protected sub gridview1_rowdatabound(byval sender as object, byval e as gridviewroweventargs)
if e.row.rowtype = datacontrolrowtype.header then
e.row.attributes.add("style", "background:#9999ff;color:#ffffff;font-size:14px")
else
e.row.attributes.add("style", "background:#fff")
end if
end sub
</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>
