Question

我遇到的情况是需要使用ASP.Net gridview实现多个colspan和两个标题行。

如下所示

+----------+--------------------------------+--------------------------------+
|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        |
+----------+----------+----------+----------+----------+----------+----------+

有可能吗？

编辑：标题的行数和/或列数甚至子标题都不固定。

Answer 1

通过RowSpan属性访问网格视图的ColumnSpan和Cells。

要访问标题单元格：

//Replace ColumnSpan with RowSpan if needed (and if you can get multiple header rows)
Gridview1.HeaderRow.Cells[CELL_INDEX].ColumnSpan = 2; //Need to know the cell index

访问正常行的单元格：

//Replace ColumnSpan with RowSpan if needed
Gridview1.Rows[ROW_INDEX].Cells[CELL_INDEX].ColumnSpan = 2; //Need to know the row index and the cell index in that row

多标题行可能有点棘手。我从来没有这样做过，但这里的人似乎有一个很好的答案：How to add Header and Subheader in Gridview

Answer 2

可以这样做，但需要一些试验和错误来获得你想要的设计。使用GridView OnRowDataBound事件。在构建GridView之后执行此操作会更容易，尤其是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);
                }
        }
    }
}

上面的代码片段会给出以下结果。

更新

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

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和多个标题行？

2 个答案: