GridView 实现复杂的表头

    实现原理：

        1.将GridView 属性 ShowHeader 设为FALSE
        
            

 1 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="728px" bordercolorlight="black" bordercolordark="black" ShowHeader="False">
 2            <Columns>
 3                <asp:BoundField DataField="字段1" HeaderText="字段1" />
 4                <asp:BoundField DataField="字段2" HeaderText="字段2" />
 5                <asp:BoundField DataField="字段3" HeaderText="字段3" />
 6                <asp:BoundField DataField="字段4" HeaderText="字段4" />
 7                <asp:BoundField DataField="字段5" HeaderText="字段5" />
 8                <asp:BoundField DataField="字段6" HeaderText="字段6" />
 9                <asp:BoundField DataField="字段7" HeaderText="字段7" />
10                <asp:BoundField DataField="字段8" HeaderText="字段8" />
11            </Columns>
12            <RowStyle HorizontalAlign="Center" />
13            <PagerStyle HorizontalAlign="Center" />
14        </asp:GridView>

        2.将数据集绑定到GridView中
    

 1    public void BindTable()
 2    {
 3        DataTable dt = new DataTable("aa");
 4        dt.Columns.Add("字段1");
 5        dt.Columns.Add("字段2");
 6        dt.Columns.Add("字段3");
 7        dt.Columns.Add("字段4");
 8        dt.Columns.Add("字段5");
 9        dt.Columns.Add("字段6");
10        dt.Columns.Add("字段7");
11        dt.Columns.Add("字段8");
12        for (int i = 0; i < 15; i++)
13        {
14            DataRow dr = dt.NewRow();
15            dr[1] = i.ToString();
16            dr[2] = i.ToString();
17            dr[3] = i.ToString();
18            dr[4] = i.ToString();
19            dr[5] = i.ToString();
20            dr[6] = i.ToString();
21            dr[7] = i.ToString();
22            dr[0] = i.ToString();
23            dt.Rows.Add(dr);
24        }
25        GridView1.DataSource = dt;
26        GridView1.DataBind();
27    }

        3.利用javascript动态的添加表头．

 1<script type="text/javascript">
 2    
 3        function intt()
 4        {
 5            var getTb= document.getElementById("GridView1");
 6            var crTR = getTb.insertRow(0);
 7            var crTD1 = crTR.insertCell();
 8            crTD1.innerHTML="<div class='h'>字段1</div>";
 9            var crTD2 = crTR.insertCell(); 
10            crTD2.innerHTML="<div class='h'>字段2</div>";
11            var crTD3 = crTR.insertCell();
12            crTD3.innerHTML="<div class='h'>字段3</div>";
13            var crTD4 = crTR.insertCell(); 
14            crTD4.innerHTML="<div class='h'>字段4</div>";
15            var crTD5 = crTR.insertCell(); 
16            crTD5.innerHTML="<div class='h'>字段5</div>";
17            var crTD6 = crTR.insertCell(); 
18            crTD6.innerHTML="<div class='h'>字段6</div>";
19            var crTD7 = crTR.insertCell(); 
20            crTD7.innerHTML="<div class='h'>字段7</div>";
21            var crTD8 = crTR.insertCell(); 
22            crTD8.innerHTML="<div class='h'>字段8</div>";
23            
24            
25            var crTR2 = getTb.insertRow(0); 
26            var crTD12 = crTR2.insertCell(); 
27            crTD12.innerHTML="<div class='h'>合并</div>";
28            var crTD22 = crTR2.insertCell(); 
29            crTD22.innerHTML="<div class='h'>合并</div>";
30            var crTD32 = crTR2.insertCell(); 
31            crTD32.colSpan=2;
32            crTD32.innerHTML="<div class='h'>合并</div>";
33            var crTD42 = crTR2.insertCell(); 
34            crTD42.colSpan=2;
35            crTD42.innerHTML="<div class='h'>合并</div>";
36            var crTD52 = crTR2.insertCell(); 
37            crTD52.innerHTML="<div class='h'>合并</div>";
38            crTD52.colSpan=2;
39            
40            var crTR3 = getTb.insertRow(0); 
41            var crTD13 = crTR3.insertCell(); 
42            crTD13.innerHTML="<div class='h'>合并</div>";
43            crTD13.colSpan=2
44            var crTD33 = crTR3.insertCell(); 
45            crTD33.colSpan=6;
46            crTD33.innerHTML="<div class='h'>合并</div>";
47            
48        }
49        intt();
50    </script>

    保存运行。