2

我试图在状态列内显示一个圆圈，而不是绑定到网格视图中的任何字段。因此，如果 Parent ID = 1 那么我想用绿色填充圆圈，如果 Parent 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>
4

1 回答 1

5

您可以使用 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";
    }
}
于 2013-05-06T22:05:05.753 回答