如何根据单元格值使用颜色设置 Asp.net GridView 单元格的样式

Question

我有一个 Gridview ，它有一个名为 student_Class 的列。网格视图上有大约 80 个类。我已使用 GroupBy 查询对此类进行了分组。

现在我想用不同的颜色为这个不同的类设置样式。这怎么可能？
在RowDataBound 上写所有的类并给颜色是不容易的。

还有其他方法吗？

代码：

groups = (ArrayList)Session["selectedclass"];
SELECT id,name,student_Class FROM student where 
         student_Class='"+groups[0].ToString().Trim()+"'  
         group by  student_Class.

将数据作为

 id   name   student_class
 1    aa      A
 2    bb      A
 3    cc      A
 4    dd      B
 5    ee      B
 6    as      B
 7    ss      B
 8    AZZ     D

值为A的学生班级需要相同的颜色（用于单元格），B需要其他颜色，等等。

Answer 1

ASPX：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="id" DataSourceID="SqlDataSource1" 
    ondatabound="GridView1_DataBound" onrowdatabound="GridView1_RowDataBound">
    <Columns>
        <asp:BoundField DataField="id" HeaderText="id" ReadOnly="True" 
            SortExpression="id" />
        <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" />
        <asp:BoundField DataField="student_class" HeaderText="student_class" 
            SortExpression="student_class" />
    </Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:SiteConnectionString %>" 
    SelectCommand="SELECT * FROM [student]">
 </asp:SqlDataSource>

后面的代码：

static string[,] ClassNames =
{
   {"A","Red"},
   {"B","Blue"},
   {"C","Pink"},
   {"D","Green"},
   // and so on
};
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    string className = e.Row.Cells[2].Text;
    string color = "Black";
    for (int i = 0; i <= ClassNames.GetUpperBound(0); i++)
    {
        if (ClassNames[i, 0] == className)
        {
            color = ClassNames[i, 1];
            e.Row.Cells[2].ForeColor = Color.FromName(color);
            e.Row.Cells[2].BorderColor = Color.Black;
            break;
        }
    }
}

Answer 2

如果您只想根据值设置样式，我必须建议您在客户端使用 Jquery 或 javaScript。
此外，它不会影响性能，因为它是在客户端而不是在RowDataBound

代码：使用客户端 -（我更推荐）
在这里你可以根据你的类值设置尽可能多的条件，无需编写额外的服务器端代码

$(document).ready(function () {
        $(".myGvClass").find("td").each(function () {
            if ($(this).text() == "Class B") {
                $(this).css("color", "Red");
            }
            
            if ($(this).text() == "Class A") {
                $(this).css("color", "Blue");
            }
          
            if ($(this).text() == "Class C") {
                $(this).css("color", "green");
            }
          //  ..... and so on
    });



 

HTML 标记：

 <asp:GridView ID="GridView1" runat="server" CssClass="myGvClass">
 </asp:GridView>

代码隐藏：

 GridView1.DataSource = YourDataTable;
 GridView1.DataBind();

屏幕截图：

---

---

代码：使用服务器端
在myGridview_DataBound 事件中循环遍历 Gridview 行，并检查条件单元格值并设置相应的颜色。

protected void myGridview_DataBound(object sender, EventArgs e)
{
    for (int i = 0; i <= myGridview.Rows.Count - 1; i++)
    {
        string myClassVal = myGridview.Rows[i].Cells[2].Text;
        if (myClassVal == "Class A")
        {
            myGridview.Rows[i].Cells[2].BackColor = Color.Green;
         }
        else if (myClassVal == "Class B")
        {
            myGridview.Rows[i].Cells[2].BackColor = Color.Red;
        }
        else 
        {
           myGridview.Rows[i].Cells[2].BackColor = Color.Orange;
        }
    }
}

HTML：

<asp:GridView ID="myGridview" runat="server" ondatabound="myGridview_DataBound">
</asp:GridView>

代码隐藏：

myGridview.DataSource = YourDataTable;
myGridview.DataBind(); 

截图：

Answer 3

给猫换皮的方法有很多，但如果你真的不想使用 RowDataBound，你可以使用一个 TemplateColumn，在它的 ItemTemplate 中包含一个样式化的控件。例如

<asp:GridView ...>
  ...
  <Columns>
     ...
     <asp:TemplateField ...>
         <ItemTemplate>
            <asp:Panel ... CssClass='<%# GetStudentCssClass(Eval("student_Class")) %>'>
            ...
            </asp:Panel>
         </ItemTemplate>
         ...