c# - GridView 对行进行分组并更改颜色

Question

我使用可折叠的 GridView，带有父 GridView 和子 GridView 。在子 GridView 中，我希望按日期对行进行分组(SQL 查询已经这样做了)，然后根据组为每组行交替颜色。

        <asp:GridView ID="gvSites" runat="server" AutoGenerateColumns="false" CssClass="Grid"
    DataKeyNames="Location" OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <img alt = "" style="cursor: pointer" src="images/plus.png" />
                <asp:Panel ID="pnlPetrols" runat="server" Style="display: none">
                    <asp:GridView ID="gvPetrols" runat="server" AutoGenerateColumns="false" CssClass = "ChildGrid">
                        <Columns>
                            <asp:BoundField ItemStyle-Width="150px" DataField="Date" HeaderText="Date------------------------" />
                            <asp:BoundField ItemStyle-Width="150px" DataField="PatrolNo" HeaderText="PatrolNo----------------" />
                            <asp:BoundField ItemStyle-Width="150px" DataField="ScansDue" HeaderText="ScansDue----------------" />
                            <asp:BoundField ItemStyle-Width="150px" DataField="Total" HeaderText="Total" />
                        </Columns>
                    </asp:GridView>
                </asp:Panel>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField ItemStyle-Width="150px" DataField="Location" HeaderText="Location" />

    </Columns>
</asp:GridView>

这是我得到的:

Date        PatrolNo    ScansDue   Total
07/22/2014  2           8          1
07/22/2014  4           8          1
07/22/2014  6           8          1
07/22/2014  7           8          1
07/23/2014  6           8          2
07/23/2014  7           8          1
07/23/2014  8           8          1

我想要 07/22/2014 的所有记录都用一种颜色，所有 07/23/2014 的所有记录都用另一种颜色。

Answer 1

这将适用于在您的组之间改变的样式。

设置一个全局变量来保存当前的 css 类，并为行分组值。然后使用RowDatabound实现交替行

//Global variables
string currentClass = "alternateDataRow";
string currentGroup = string.Empty;

protected void gvPetrols_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        //Get value from cell, you could also use DataKeys
        //We will assume 2 CSS classes "dataRow", "alternateDataRow"
        string rowGroup = e.Row.Cells[0].Text;

        //swap class if group value changes
        if (rowGroup != currentGroup)
        {
            currentClass = currentClass == "dataRow" ? "alternateDataRow" : "dataRow";
            currentGroup = rowGroup;
        }

        e.Row.CssClass = currentClass;

    }
}

现在您只需创建两个 CSS 类。