要实现以下样式(跨行跨列):
实际上Asp.Net下的DataGrid控件只不过是一个HtmlTable,只不过在HtmlTable的基础上添加了很多属性、方法,纳入ViewState机制,来生成、控制它。
我们可以在属性生成器中定义列的表头。它实际上只不过是在列之间插入了<td></td>
的html标记。我是在’审核’列后添加<tr> <td colspan=\"2\">一档</td><td colspan=\"2\">二档</td> <td colspan=\"2\">一档</td><td colspan=\"2\">二档</td> </tr>"
这时你会发现2层表头就出现了。
具体是在DataGrid的OnItemDataBound事件中处理,跨行跨列的合并。前台代码就不在这里展示了,后台代码如下:
protected void dg_list_ItemDataBound(object sender, DataGridItemEventArgs e)
{
#region 多维表头设计
if (e.Item.ItemType == ListItemType.Header)
{
e.Item.Cells[0].RowSpan = 3;//控件中单元格跨越的行数
e.Item.Cells[1].RowSpan = 3;
e.Item.Cells[2].RowSpan = 3;
e.Item.Cells[3].ColumnSpan = 4;//控件中单元格跨越的列数
e.Item.Cells[3].HorizontalAlign = HorizontalAlign.Center;
e.Item.Cells[3].Text = "医生正常(个/天)</td>";
e.Item.Cells[4].ColumnSpan = 4;
e.Item.Cells[4].HorizontalAlign = HorizontalAlign.Center;
e.Item.Cells[4].Text = "护士正常(个/天)</td>";
e.Item.Cells[5].ColumnSpan = 1;
e.Item.Cells[5].RowSpan = 3;
e.Item.Cells[5].HorizontalAlign = HorizontalAlign.Center;
e.Item.Cells[5].Text = "修改</td>";
e.Item.Cells[6].ColumnSpan = 1;
e.Item.Cells[6].RowSpan = 3;
e.Item.Cells[6].HorizontalAlign = HorizontalAlign.Center;
e.Item.Cells[6].Text = "删除</td>";
e.Item.Cells[7].ColumnSpan = 1;
e.Item.Cells[7].RowSpan = 3;
e.Item.Cells[7].HorizontalAlign = HorizontalAlign.Center;
e.Item.Cells[7].Text = "审核</td></tr>"
+ "<tr align=\"center\" style=\"color:#000088;background-color:#ECEFF8;height:30px;\">"
+ "<td colspan=\"2\">一档</td><td colspan=\"2\">二档</td>"
+ "<td colspan=\"2\">一档</td><td colspan=\"2\">二档</td>"
+ "</tr>"
+ "<tr align=\"center\" style=\"color:#000088;background-color:#ECEFF8;height:30px;\">"
+ "<td>大夜</td><td>小夜</td><td>大夜</td><td>小夜</td>"
+ "<td>大夜</td><td>小夜</td><td>大夜</td><td>小夜</td>"
+ "</tr>";
for (int i = 8; i < 14; i++)
{
e.Item.Cells[i].Visible = false;
}
}
#endregion 多维表头设计
}
好了,这样就实现了。暂时就写到这里,不完善的地方请大家补充,有错误的地方请大家指正。