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

Question

我有一个Gridview，它有一个名为student_Class的列。网格视图上有大约80个Class。我使用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，你可以在其ItemTemplate中使用一个包含样式控件的TemplateColumn。 E.g。

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