根据CheckBox的选定状态改变GridView当前行的颜色，且在分页后能保存和恢复颜色

问题描述：在一个GridView中的某模板列加入了两个CheckBox，分别表示“True”和“False”，现要实现当选中True时改变 当前行的颜色，选中False时又改变成另外一种颜色，不选时当然就没有颜色，且要能在分页事件发生后保存颜色和恢复颜色，代码如下：


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript">
        function changeColor(cb1, cb2, index, id) {
            document.getElementById(cb2).checked = false;
            var tr = document.getElementById(cb1).parentElement.parentElement;
            tr.style.backgroundColor = index == 1 ? "red" : "blue";
            var cbs = document.getElementById("<%= hf.ClientID %>");
            if (document.getElementById(cb1).checked) {
                if (cbs.value.indexOf(id + "," + cb2) > -1)
                    cbs.value=cbs.value.replace(id + "," + cb2, id + "," + cb1);
                else if (cbs.value.indexOf(id + "," + cb1) < 0)
                    cbs.value += id + "," + cb1 + "|";
            }

            else

            {

                 tr.style.backgroundColor="white";

                 cbs.value=cbs.value.replace(id+","+cb1,"").replace(id+","+cb2,"");

            }
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound"
            DataKeyNames="ID" PageSize="5" OnPageIndexChanging="GridView1_PageIndexChanging"
            AllowPaging="true" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox1" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox2" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField HeaderText="ID" DataField="ID" />
                <asp:BoundField HeaderText="Name" DataField="Name" />
                <asp:BoundField HeaderText="Description" DataField="Description" />
            </Columns>
        </asp:GridView>
        <asp:HiddenField ID="hf" runat="server" />
    </div>
    </form>
</body>
</html>

 


protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {

                Bind();
            }

        }
        void Bind()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add(new DataColumn("ID", typeof(int)));
            dt.Columns.Add(new DataColumn("Name", typeof(string)));
            dt.Columns.Add(new DataColumn("Description", typeof(string)));

            for (int i = 0; i < 25; i++)
            {
                DataRow dr = dt.NewRow();
                dr[0] = i;
                dr[1] = "Name_" + i;
                dr[2] = "Description_" + i;
                dt.Rows.Add(dr);
            }
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
        protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
        {
            GridView1.PageIndex = e.NewPageIndex;
            Bind();
        }
        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                CheckBox cb1 = e.Row.FindControl("CheckBox1") as CheckBox;
                CheckBox cb2 = e.Row.FindControl("CheckBox2") as CheckBox;
                string id = GridView1.DataKeys[e.Row.RowIndex].Value.ToString();
                if (cb1 != null && cb2 != null)
                {
                    cb1.Attributes.Add("onclick", "changeColor('" + cb1.ClientID + "','" + cb2.ClientID + "',1," + id + ");");
                    cb2.Attributes.Add("onclick", "changeColor('" + cb2.ClientID + "','" + cb1.ClientID + "',2," + id + ");");
                }
                if (!string.IsNullOrEmpty(hf.Value))
                {
                    if (Array.IndexOf(hf.Value.Split('|'), id + "," + cb1.ClientID) > -1)
                    {
                        e.Row.BackColor = System.Drawing.Color.Red;
                        cb1.Checked = true;
                    }
                    else if (Array.IndexOf(hf.Value.Split('|'), id + "," + cb2.ClientID) > -1)
                    {
                        e.Row.BackColor = System.Drawing.Color.Blue;
                        cb2.Checked = true;
                    }
                }
            }

        }

共有0个回答