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 
     } 
    }  
}