GridView组行和更改颜色

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

这会为你的群体之间alterate款式工夫。

设置一个全局变量来保存当前的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 2

添加AlternatingRowStyle-的CssClass = “备用” RowStyle-的CssClass您gvSites的GridView = “正常”，

，并添加这个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 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 
     } 
    }  
}