如何使用C＃基於單元格項目更改gridview單元格顏色

Question

我想在狀態列中顯示一個圓圈，並且不綁定到GridView中的任何字段。所以如果父母ID = 1，那麼我想用綠色填充圓圈，如果父母ID = 2，那麼我想用黃色填充圓圈等等。狀態欄應該只有基於我提到的條件的彩色圓圈。此外，圈子可能是某種形象或不確定什麼是最好的和最簡單的方式。這是我想要修改的代碼。後面感謝

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
     DataKeyNames="ID" DataSourceID="AccessDataSource1" 
     ondatabound="GridView1_DataBound" onrowdatabound="GridView1_RowDataBound"> 
     <Columns> 
      <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" 
       ReadOnly="True" SortExpression="ID" /> 
      <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" /> 
      <asp:BoundField DataField="Location" HeaderText="Location" 
       SortExpression="Location" /> 
      <asp:BoundField DataField="ParentID" HeaderText="ParentID" 
       SortExpression="ParentID" /> 
      <asp:BoundField DataField="Content" HeaderText="Content" 
       SortExpression="Content" /> 
      <asp:BoundField DataField="ShortContent" HeaderText="ShortContent" 
       SortExpression="ShortContent" /> 
      <asp:TemplateField HeaderText="Status" ControlStyle-Width="75px" > 
       <ItemTemplate> 
        <asp:Label ID="Label1" runat="server" Text='<%# Eval("ParentID") %>'></asp:Label> 
       </ItemTemplate> 
      </asp:TemplateField> 
     </Columns> 
    </asp:GridView> 

代碼：

protected void Page_Load(object sender, EventArgs e) 
    { 
     if (!Page.IsPostBack) 
     { 
      this.BindData(); 
     } 
    } 

public void BindData() 
    { 


     SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString); 
     SqlDataAdapter da = new SqlDataAdapter("SELECT ID, Title, Location, ParentID, Content from MyTable", con); 
     DataTable dt = new DataTable(); 
     da.Fill(dt); 
     GridView1.DataSource = dt; 
     GridView1.DataBind(); 
     con.Close(); 
    } 


protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 
    { 

     if (e.Row.RowType == DataControlRowType.DataRow) 
     { 
      var item = e.Row.DataItem as DataTable; 

      var panel = (Panel)e.Row.FindControl("CirclePanel"); 

      if (item.ParentID == "1") 
      { 
       panel.CssClass = "yellow"; 
      } 
      else 
      { 
       panel.CssClass = "green"; 
      } 
     } 
    } 

CSS樣式

<style type="text/css"> 
    .green, .yellow { border-radius: 10px; width: 20px; height: 20px;} 
    .green, .yellow { -moz-border-radius: 10px; width: 20px; height: 20px;} 
    .green, .yellow { -webkit-border-radius: 10px; width: 20px; height: 20px;} 
    .green, .yellow { -moz-border-radius: 10px; width: 20px; height: 20px;} 
    .green { background: green; } 
    .yellow { background: yellow; } 
</style> 

Answer 1

你可以使用CSS邊界半徑，以顯示圓圈圖標。

注意：您可以使用的RowDataBound您的方案，而不是數據綁定 - 它可以讓你對當前行的引用的束縛。

<style type="text/css"> 
    .green, .yellow { border-radius: 10px; width: 20px; height: 20px;} 
    .green { background: green; } 
    .yellow { background: yellow; } 
</style> 
<asp:GridView runat="server" ID="GridView1" OnDataBound="GridView1_DataBound" 
    AutoGenerateColumns="False"> 
    <Columns> 
     <asp:TemplateField HeaderText="Title"> 
      <ItemTemplate> 
       <asp:Panel runat="server" ID="CirclePanel"> 
       </asp:Panel> 
      </ItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView> 


protected void Page_Load(object sender, EventArgs e) 
{ 
    if (!IsPostBack) 
    { 
     var table = new DataTable(); 
     table.Columns.Add(new DataColumn 
      { 
       DataType = Type.GetType("System.Int32"), 
       ColumnName = "ID" 
      }); 
     table.Columns.Add(new DataColumn 
      { 
       DataType = Type.GetType("System.Int32"), 
       ColumnName = "ParentID" 
      }); 

     for (int i = 0; i <= 2; i++) 
     { 
      var row = table.NewRow(); 
      row["ID"] = i + 100; 
      row["ParentID"] = i; 
      table.Rows.Add(row); 
     } 

     GridView1.DataSource = table; 
     GridView1.DataBind(); 
    } 
} 

public void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 
{ 
    if (e.Row.RowType == DataControlRowType.DataRow) 
    { 
     var row = ((DataRowView)e.Row.DataItem).Row; 
     int parentID = row.Field<int>("ParentID"); 
     var panel = (Panel)e.Row.FindControl("CirclePanel"); 
     panel.CssClass = parentID == 1 ? "yellow" : "green"; 
    } 
}