2

Status 列内に円を表示しようとしていますが、グリッドビューのどのフィールドにもバインドされていません。したがって、親 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>
4

1 に答える 1

5

css border-radius を使用して円のアイコンを表示できます。

ここに画像の説明を入力

注: シナリオでは、DataBound の代わりに 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";
    }
}
于 2013-05-06T22:05:05.753 に答える