如何使用ASP.Net gridview实现多个colspan和多个标题行? [英] How to achieve multiple colspan and multiple header row using ASP.Net gridview?

问题描述

我需要使用ASP.Net gridview实现多个colspan和两个标题行.

I'm in a situation were need to achieve multiple colspan and two header row using ASP.Net gridview.

类似下面的内容

+----------+--------------------------------+--------------------------------+
|Name      |English                         |Math                            |
|          |----------+----------+----------+----------+----------+----------+
|          |1st Term  |2nd Term  |3rd Term  |1st Term  |2nd Term  |3rd Term  |    
+----------+----------+----------+----------+----------+----------+----------+
|Adam      |50        |60        |70        |55        |65        |75        |
+----------+----------+----------+----------+----------+----------+----------+
|Smith     |52        |62        |72        |57        |68        |70        |
+----------+----------+----------+----------+----------+----------+----------+

有可能做到吗?

行和/或列的数量，甚至标题的子标题的数量都是固定的.

Edit : Number of rows and / or columns or even sub-headers of a header is not fixed.

推荐答案

可以完成，但是要想得到想要的设计，需要花费一些试验和错误.使用GridView OnRowDataBound 事件.构建GridView之后，这样做会更容易，尤其是对于 RowSpan .

It can be done, but it takes a bit of trial and error to get the design you want. Use the GridView OnRowDataBound event. It would be easier to do this after the GridView is build, especially for RowSpan.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        int spanColumn_1_start = 1;
        int spanColumn_1_length = 3;

        //apply colspan
        e.Row.Cells[spanColumn_1_start].ColumnSpan = 3;

        //remove the spanned cells
        for (int i = 1; i < spanColumn_1_length; i++)
        {
            e.Row.Cells.RemoveAt(spanColumn_1_start + 1);
        }

        //note that the startindex of the 2nd colspan is set after removing cells for 1st colspan
        int spanColumn_2_start = 2;
        int spanColumn_2_length = 3;

        //apply colspan
        e.Row.Cells[spanColumn_2_start].ColumnSpan = 3;

        //remove the spanned cells
        for (int i = 1; i < spanColumn_2_length; i++)
        {
            e.Row.Cells.RemoveAt(spanColumn_2_start + 1);
        }
    }
    else if (e.Row.RowType == DataControlRowType.DataRow)
    {
        int rowIndex = e.Row.DataItemIndex;

        //to make a rowspan you have to work backwards since the next row does not exist yet
        if (rowIndex == 1)
        {
            GridView1.Rows[rowIndex - 1].Cells[0].RowSpan = 2;
            e.Row.Cells.RemoveAt(0);
        }

        //span 4 rows in column 3 starting at row 6
        if (rowIndex == 9)
        {
                int rowSpan = 4;
                int columnIndex = 3;

                //apply rowspan
                GridView1.Rows[rowIndex - rowSpan].Cells[columnIndex].RowSpan = rowSpan;

                //remove the spanned rows
                for (int i = 1; i < rowSpan; i++)
                {
                    GridView1.Rows[rowIndex - (rowSpan - i)].Cells.RemoveAt(columnIndex);
                }
        }
    }
}

上面的代码段将给出以下结果.

The above snippet will give the following result.

更新

要添加额外的标题行，您需要使用GridView的 OnRowCreated 事件.

To add an extra header row you need to use the OnRowCreated event of the GridView.

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
    //cast the sender back to a gridview
    GridView gv = sender as GridView;

    //check if the row is the header row
    if (e.Row.RowType == DataControlRowType.Header)
    {
        //create a new row
        GridViewRow extraHeader = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);
        extraHeader.BackColor = Color.Green;

        //loop all the columns and create a new cell for each
        for (int i = 0; i < gv.Columns.Count; i++)
        {
            TableCell cell = new TableCell();
            cell.Text = "ExtraHeader " + i;

            //add the cell to the new header row
            extraHeader.Cells.Add(cell);
        }

        //add the new row to the gridview
        gv.Controls[0].Controls.AddAt(0, extraHeader);
    }
}

这篇关于如何使用ASP.Net gridview实现多个colspan和多个标题行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！