WebUI中DataGrid多层表头的终极解决办法

因为DataGrid控件的简单易懂，大多数做.NET程序员都喜欢用，有需要把数据显示成表格样式的地方DataGrid会是首选，但是所有的东西都会有好和不好的一面，DataGrid在给我们带来了数据显示方便的同时，也给我们带来了不灵活的问题，多层表头就是例子。
相信大家都遇到过这样的需求：

Head1	Head2	Head3	Head4
SubTitle1	SubTitle2

我在网上Google和Baidu了一下，发现大家都是在DataGrid的ItemCreated和ItemDataBind事件中来实现的（实现的方法太多，这里就不用列举了），我觉得这样做效率不高而且麻烦，因为需要在系统中每个用到DataGrid的地方都需要添加那样的实现代码。所以我想可以通过重写DataGrid的Render方法来实现多层表头的显示，代码如下：

usingSystem;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.ComponentModel;

namespaceCustomDBGrid
{
/**//**//**////<summary>
///CustomDataGrid的摘要说明。
///</summary>
[ToolboxData("<{0}:CustomDataGridrunat=server></{0}:CustomDataGrid>")]
publicclassCustomDataGrid:System.Web.UI.WebControls.DataGrid
{
publicstringHeadHTML
{
get{
if(ViewState["HeadHTML"]!=null)
returnViewState["HeadHTML"].ToString();
else
returnnull;
}
set{
ViewState["HeadHTML"]=value;
}
}
protectedoverridevoidRender(HtmlTextWriterwriter)
{
System.IO.StringWriterstringWriter=newSystem.IO.StringWriter();
System.Web.UI.HtmlTextWriterTem_Writer=newHtmlTextWriter(stringWriter);
//获得原始输出结果
base.Render(Tem_Writer);

stringTem_Str=stringWriter.ToString();
stringStrToRender=Tem_Str;

if(this.HeadHTML!=null)
{
//得到默认的表格第一行的HTML，这一行就是表格头了
intIndex_Head=Tem_Str.IndexOf("<tr>");
intIndex_Last=Tem_Str.IndexOf("</tr>");
stringOldHeadHTML=Tem_Str.Substring(Index_Head,Index_Last+5-Index_Head);

//将默认的表格头替换成我们想要的表格头HTML
StrToRender=Tem_Str.Replace(OldHeadHTML,this.HeadHTML);
}

//将新的结果输出到writer
writer.Write(StrToRender);
}

}
}

在有需要使用多层表头的地方使用这个自定义的DataGrid，只需要在DreamWeaver里面设计好一个表头，然后把CustomDatagrid的HeadHTML属性设置为在DreamWeaver中生成的HTML即可。

比如你在DreamWeaver中得到的表头HTML是：

<TABLE>
<TR>
<TDrowspan="2"><divalign="center"></div>
<divalign="center">Head1</div></TD>
<TDrowspan="2"><divalign="center"></div>
<divalign="center">Head2</div></TD>
<TDcolspan="2"><divalign="center">Head3</div></TD>
<TDrowspan="2"><divalign="center"></div>
<divalign="center">Head4</div></TD>
</TR>
<TR>
<TD><divalign="center">SubTitle1</div></TD>
<TD><divalign="center">SubTitle2</div></TD>
</TR>
</TABLE>

那么你只需把下面这段字符串赋值给CustomDataGrid的HeadHTML：

<TR>
<TDrowspan="2"><divalign="center"></div>
<divalign="center">Head1</div></TD>
<TDrowspan="2"><divalign="center"></div>
<divalign="center">Head2</div></TD>
<TDcolspan="2"><divalign="center">Head3</div></TD>
<TDrowspan="2"><divalign="center"></div>
<divalign="center">Head4</div></TD>
</TR>
<TR>
<TD><divalign="center">SubTitle1</div></TD>
<TD><divalign="center">SubTitle2</div></TD>
</TR>

值得注意的是这里没有包括表格开始标签<Table>和表格结束标签</Table>,这取决于重写DataGrid的Render方法的方式，这里的重写方式不需要这两个标签。

好了，现在不管在设计试图和还是在运行页面都可以看到多层表头的样子了。