如何使用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 border-radius显示圆圈图标。

注意：您可以将RowDataBound用于您的场景而不是DataBound - 它会为您提供对绑定的当前行的引用。

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