GridView多行表頭合併

taogchan發表於2013-09-13

多行表頭合併, 網上很多例項, 這裡寫的很詳細, 力求讓每個人都能看懂.
實現原理:GridView在ASP.NET中最終轉為HMTL的表格顯示錶頭。
在GridView建立行表頭行時: e.Row.RowType == DatacontrolRowType.Header
清除掉舊的表頭, 再重新拼接新的表頭.

TableHeaderCell thc = new TableHeaderCell();

thc.Text = "表頭";

對應生成的HTML為:

表頭

多行表頭合併效果圖

測試多行合併表頭
表頭 表頭1 表頭2 表頭3
表頭1-1 表頭2-1 表頭2-2 表頭3-1 表頭3-2 表頭3-3

 

 

 

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
    {
        //判斷建立的行是否為表頭行
        if (e.Row.RowType == DataControlRowType.Header)
        {
            //獲取表頭所在行的所有單元格
            TableCellCollection tcHeader = e.Row.Cells;
            //清除自動生成的表頭
            tcHeader.Clear();
 
            //新新增的第一個表頭單元格, 設定為合併7個列, 從而形成一行.
            tcHeader.Add(new TableHeaderCell());
            tcHeader[0].ColumnSpan = 7;
            tcHeader[0].Text = "測試多行合併表頭";
            //表示當前單元格結束, 表示本行結束, 另起新一行    關鍵點
             
            //新增第二個表頭單元格, 設定為合併兩行.
            tcHeader.Add(new TableHeaderCell());
            tcHeader[1].RowSpan = 2;
            tcHeader[1].Text = "表頭";
 
            tcHeader.Add(new TableHeaderCell());
            tcHeader[2].Text = "表頭1";
 
            tcHeader.Add(new TableHeaderCell());
            tcHeader[3].ColumnSpan = 2;
            tcHeader[3].Text = "表頭2";
 
            tcHeader.Add(new TableHeaderCell());
            tcHeader[4].ColumnSpan = 3;
            tcHeader[4].Text = "表頭3";
             
            //第二行的所有的單元格新增完成, 換行
 
            //新增第三行所有的單元格
              tcHeader.Add(new TableHeaderCell());
            tcHeader[5].Text = "表頭1-1";
 
            tcHeader.Add(new TableHeaderCell());
            tcHeader[6].Text = "表頭2-1";
 
            tcHeader.Add(new TableHeaderCell());
            tcHeader[7].Text = "表頭2-2";
 
            tcHeader.Add(new TableHeaderCell());
            tcHeader[8].Text = "表頭3-1";
 
            tcHeader.Add(new TableHeaderCell());
            tcHeader[9].Text = "表頭3-2";
 
            tcHeader.Add(new TableHeaderCell());
            tcHeader[10].Text = "表頭3-3";
        }
 
    }

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/22392018/viewspace-772681/,如需轉載,請註明出處,否則將追究法律責任。

下一篇: 記錄日誌檔案
GridView多行表頭合併
請登入後發表評論 登入
全部評論

相關文章