GridView控件组行和变色 [英] GridView group rows and change color

问题描述

我使用可折叠的GridView，父母子女网格视图。在子网格视图我想行日期（SQL查询已经这样做）进行分组，然后交替每一个基于群集中的行颜色。

I using collapsible GridView, with parent and child grid view. In the child grid view I want rows to be grouped by date (SQL query is already doing that) and then alternating the color for every set of rows based on group.

        <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

我想在一个颜色2014年7月22日，并在不同的颜色的所有2014年7月23日的所有记录。

I want all records for 07/22/2014 in one color and all 07/23/2014 in a different color.

推荐答案

这会为你的群体之间alterate风格的工作。

This will work for styles that alterate between your groups.

设置一个全局变量来保存当前的css类和组值的行。然后使用的RowDataBound 实施交替行

Set up a global variables to hold the current css class, and group value for the row. Then use RowDatabound to implement the alternate rows

//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类。

Now you just need to create your two CSS classes.

这篇关于GridView控件组行和变色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！