datahgrid

   【IT168 编程开发】先看下表：

业务员	地 区
	北京	上海	深圳
张三	100	200	300

　　实际上Asp.Net下的DataGrid只不过是一个HtmlTable，只不过在HtmlTable的基础上添加了很多属性、方法，纳入ViewState机制，来生成、控制它；有了这一点认识，事情就很好办了：

　　我们可以在属性生成器中可以定义列的表头，它实际上只不过是在列之间插入了“</td><td>”的html标记，如此而已；因此根据上面的例子，可以在第3列的header里输入以下内容“</td></tr><TR><TD>北京</TD><TD>上海</TD><TD>深圳</TD></TR>”，这时你会发现2层表头就出现了：

业务员	地 区
北京	上海	深圳
张三	100	200	300

　　但是显然还不够，因为我们还需要行、列的合并
　　我们可以在DataGrid的ItemDataBound事件中处理

if(e.Item.ItemType == ListItemType.Header) {      e.Item.Cells[0].RowSpan = 2;      e.Item.Cells[1].ColumnSpan = 3;      e.Item.Cells[2].Visible = false;      e.Item.Cells[3].Visible = false; }

 

-

--------------------------------------------------------

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

Head1	Head2	Head3		Head4
		SubTitle1	SubTitle2

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

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;

namespace CustomDBGrid
{
    /**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//// <summary>
    /// Custom DataGrid 的摘要说明。
    /// </summary>
    [ToolboxData("<{0}:CustomDataGrid runat=server></{0}:CustomDataGrid>")]
    public class CustomDataGrid : System.Web.UI.WebControls.DataGrid
    {
        public string HeadHTML
        {
            get{
                if(ViewState["HeadHTML"] != null)
                    return ViewState["HeadHTML"].ToString();
                else
                    return null;
            }
            set{
                ViewState["HeadHTML"] = value;
            }
        }
        protected override void Render(HtmlTextWriter writer)
        {
            System.IO.StringWriter stringWriter = new System.IO.StringWriter();
            System.Web.UI.HtmlTextWriter Tem_Writer = new HtmlTextWriter(stringWriter);
            //获得原始输出结果
            base.Render(Tem_Writer);

            string Tem_Str = stringWriter.ToString();
            string StrToRender = Tem_Str;

            if(this.HeadHTML != null)
            {
                //得到默认的表格第一行的HTML，这一行就是表格头了
                int Index_Head = Tem_Str.IndexOf("<tr>");
                int Index_Last = Tem_Str.IndexOf("</tr>");
                string OldHeadHTML = 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>
      <TD rowspan="2"><div align="center"></div>        
        <div align="center">Head1</div></TD>
      <TD rowspan="2"><div align="center"></div>        
        <div align="center">Head2</div></TD>
      <TD colspan="2"><div align="center">Head3</div></TD>
      <TD rowspan="2"><div align="center"></div>        
        <div align="center">Head4</div></TD>
    </TR>
    <TR>
      <TD><div align="center">SubTitle1</div></TD>
      <TD><div align="center">SubTitle2</div></TD>
    </TR>
</TABLE>

    

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

    <TR>
      <TD rowspan="2"><div align="center"></div>        
        <div align="center">Head1</div></TD>
      <TD rowspan="2"><div align="center"></div>        
        <div align="center">Head2</div></TD>
      <TD colspan="2"><div align="center">Head3</div></TD>
      <TD rowspan="2"><div align="center"></div>        
        <div align="center">Head4</div></TD>
    </TR>
    <TR>
      <TD><div align="center">SubTitle1</div></TD>
      <TD><div align="center">SubTitle2</div></TD>
    </TR>

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

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