以编程方式生成具有特定模板的gridview

时间:2016-11-10 15:03:36

标签: c# asp.net gridview

我目前正在尝试生成一个类似于此的Gridview

Example

前两列是使用Boundfield完成的,我将根据数据库中提供的数据进行抓取。

然而,当我有AM&行时,问题出现了。 PM

是否可以为日期标题执行colspan,并为AM& PM?因为AM& PM不计入列,而10/11/2016是列。

ASPX

<asp:GridView ID="gvAttendance" runat="server">
                    <Columns>
                        <asp:BoundField DataField="traineeID" HeaderText="Trainee ID" />
                        <asp:BoundField DataField="idNum" HeaderText="ID" />
                    </Columns>
                </asp:GridView>

1 个答案:

答案 0 :(得分:0)

可以这样做,看看我的代码片段并根据您的需要进行调整。该代码段将在默认标头中应用ColSpan,并将向GridView添加额外的标题行。

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

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

        //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 = 3;
        int spanColumn_2_length = 2;

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

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

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
    //to add a row above the normal gridview header, use: if (e.Row.RowType == DataControlRowType.Header)

    if (e.Row.RowType == DataControlRowType.DataRow && e.Row.DataItemIndex == 0)
    {
        //cast the sender as gridview
        GridView gridView = sender as GridView;

        //create a new gridviewrow
        GridViewRow gridViewRow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);

        //add some cells
        TableCell tableCell = new TableCell();
        tableCell.Text = "";
        tableCell.ColumnSpan = 2;
        gridViewRow.Cells.Add(tableCell);

        tableCell = new TableCell();
        tableCell.Text = "AM";
        gridViewRow.Cells.Add(tableCell);

        tableCell = new TableCell();
        tableCell.Text = "PM";
        gridViewRow.Cells.Add(tableCell);

        tableCell = new TableCell();
        tableCell.Text = "AM";
        gridViewRow.Cells.Add(tableCell);

        tableCell = new TableCell();
        tableCell.Text = "PM";
        gridViewRow.Cells.Add(tableCell);

        //add the new row to the gridview
        gridView.Controls[0].Controls.AddAt(1, gridViewRow);
    }
}

结果将如下所示

enter image description here