Question

我使用可折叠的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

我希望2014年7月22日的所有记录都是一种颜色，所有记录都是2014年7月23日的不同颜色。

Answer 1

在你的gvSites gridview上添加AlternatingRowStyle-CssClass =“alternate”RowStyle-CssClass =“normal”，

并添加此CSS代码：

.Grid tr.normal {
    background-color: #F7F6F3;
}

.Grid tr.alternate {
    background-color: #FFFFFF;
}

或按日期分组，您可以更改OnRowDataBound上的CSS，设置CssClass 这样，如果你需要改变你的Css颜色，你就不需要改变你的C＃（代码背后）你只能更新CssClass。

在你的情况下，你可以这样做，

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
  if (e.Row.RowType == DataControlRowType.DataRow)
  {
        e.Row.CssClass += GroupColorRule(e.Row.DataItem as Object); // Object is your class type
  }
}

//Rule to alternate the colors by Date.
private string CssGroupColorRule(Object entity){

    if(ViewState["LastDate"] == null){
        ViewState["LastDate"] = entity.Date;
        return " tr.normal";
    }else{
        if(entity.Date == Convert.ToDateTime(ViewState["LastDate"].toString()){
            return " tr.normal";
        }else{
            ViewState["LastDate"] = entity.Date;
            return " tr.alternate";
        }
    }
}

Answer 2

这适用于在您的群组之间进行更改的样式。

设置全局变量以保存当前的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类。

Answer 3

protected void YOURGRIDVIEW_RowDataBound(object sender, GridViewRowEventArgs e)
{
  if (e.Row.RowType = DataControlRowType.DataRow)
  {
      if(put_your_condition_here)
      {
           e.Row.BackColor = Drawing.Color.Red;
           //// or you can assign color by doing this: e.Row.BackColor = Color.FromName("#FFOOOO");
      }
  }
}

此处有更多解释Change the color of a row or record on a gridview on asp.net c#?

Answer 4

在您的子gridview上使用GridView_RowDataBound事件。然后，您可以在行本身上设置条件以进行样式设置：

将OnRowDataBound添加到标记：

<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" OnRowDataBound="gvPetrols_RowDataBound">
                        <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>

代码背后：

protected void gvPetrols_RowDataBound(object sender, GridViewRowEventArgs e)
{        
    if (e.Row.RowType == DataControlRowType.DataRow)
    {     
        if (e.Row.Cells[0].Text == "7/22/2014")
        {
            e.Row.ForeColor = System.Drawing.Color.FromName("#E56E94");                
        }
        else
        {
            //Other styles
        }
    }    
}

GridView组行和更改颜色

4 个答案: