在实际工作中,经常看到电子版或者纸质版的表格。这些表格,通常都不是一行表头,需要2行或者3行,只有这样的表头,才能明确表示表中数据的具体涵义。并且多行表头中,将数据相同的单元格进行合并,包括横向合并、纵向合并。
那么,我们在使用Gridview时,如何才能实现多行表头呢?
主要有三种方法,①是利用GridviwRow对象的header类型生成对象;②直接将表头内容作为普通数据显示,然后再通过样式,将表头的背景色与其它的行分开,模拟出表头效果;③利用protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)事件,在生成客户端的html时,生成需要的表格。
注意:这些操作,都是放在gridview绑定完数据这后执行,即放在Gridview1.DataSource=dt;Gridview1.Databind();之后执行。数据的列为自动绑定,没有为每列指定要绑定的字段(AutoGenerateColumns属性为true,默认)。
道理讲完了,是不是想动手了,现在开始吧。
步1、将一个gridview控件拖放在页面上
步2、实现多表头
方法1:(适用于多行)
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZwpmLlxGdpR3LcljM3ATOwAjMvw1cldWYtlUeyRnbF9CX3YjbhlGdpF3LcRXZu9lbkN3Yfd2bsJ2Xw9CXzV2Zh1WavwFdl5mLuR2cj5yZvxmYtA3Lc9CX6MHc0RHaiojIsJye.jpg)
看完了效果,再来看看代码吧
private void AddHeader()//为gridview添加表头
{
if (GridView1.Rows.Count > 0)
{
GridView1.HeaderRow.Cells.Clear();
GridView1.HeaderRow.Visible = false;
}
Table tbl = (Table)GridView1.Controls[0];
#region 添加三行表头
string ssql = "SELECT coltitle1,coltitle2,coltitle3 FROM Xt_Grid where (Grid_Code = 'CB_CostCollect')";
DataSet dgrid = DbHelperSQL.Query(ssql);
if (dgrid.Tables[0].Rows.Count > 0)
{
GridViewRow header0 = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
GridViewRow header1 = new GridViewRow(1, 1, DataControlRowType.Header, DataControlRowState.Normal);
GridViewRow header2 = new GridViewRow(2, 2, DataControlRowType.Header, DataControlRowState.Normal);
for (int i = 0; i < dgrid.Tables[0].Rows.Count; i++)
{
header0.Cells.Add(new TableCell());
header0.Cells[i].Wrap = false;
header0.Cells[i].Text = dgrid.Tables[0].Rows[i]["coltitle1"].ToString().Trim();
header1.Cells.Add(new TableCell());
header1.Cells[i].Wrap = false;
header1.Cells[i].Text = dgrid.Tables[0].Rows[i]["coltitle2"].ToString().Trim();
header2.Cells.Add(new TableCell());
header2.Cells[i].Wrap = false;
header2.Cells[i].Text = dgrid.Tables[0].Rows[i]["coltitle3"].ToString().Trim();
}
tbl.Controls.AddAt(0, header0);
tbl.Controls.AddAt(1, header1);
tbl.Controls.AddAt(2, header2);
}
#endregion
#region 合并表头
for (int i = 0; i < dgrid.Tables[0].Rows.Count; i++)
{//合并行
TableCell oldtc = tbl.Rows[0].Cells[i];
for (int j = 1; j < 3; j++)
{
TableCell newtc = tbl.Rows[j].Cells[i];
if (newtc.Text == oldtc.Text)
{
newtc.Visible = false;
if (oldtc.RowSpan == 0)
{
oldtc.RowSpan = 2;
oldtc.VerticalAlign = VerticalAlign.Middle;
}
else
{
oldtc.RowSpan = oldtc.RowSpan + 1;
oldtc.VerticalAlign = VerticalAlign.Middle;
}
}
}
}
for (int i = 0; i < 2; i++)
{//合并列
TableCell oldtc = tbl.Rows[i].Cells[0];
for (int j = 1; j < dgrid.Tables[0].Rows.Count - 1; j++)
{
TableCell newtc = tbl.Rows[i].Cells[j];
if (newtc.Text == oldtc.Text)
{
newtc.Visible = false;
if (oldtc.ColumnSpan == 0)
{
oldtc.ColumnSpan = 2;
oldtc.HorizontalAlign = HorizontalAlign.Center;
}
else
{
oldtc.ColumnSpan++;
oldtc.HorizontalAlign = HorizontalAlign.Center;
}
}
else
{
oldtc = newtc;
}
}
}
#endregion
}
注意:表头的名称存放在了自建的一个表xt_grid里面,对应的字段分别是:第一行表头-ColTitle1,第二行表头-ColTitle2,第三行表头-ColTitle3。
说明:①清除、隐藏原来的表头;②通过GridView1.Controls[0]获取Table对象;③查找表头信息,此处为三行,循环生成GridViewRow对象,类型为头(header),并添加到table中;④循环合并行,列。
方法二(为Gridview控件添加多行表头(之二))
方法三(为Gridview控件添加多行表头(之三))