Gridview中添加选中框选中该条记录

最新推荐文章于 2018-04-18 11:23:50 发布

weixin_33726318

最新推荐文章于 2018-04-18 11:23:50 发布

阅读量148

点赞数

文章标签：数据库 javascript ViewUI

本文介绍如何在ASP.NET中使用GridView控件进行数据展示、更新、添加和删除操作，并通过JavaScript实现选中行背景色变化，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下：（这里用到的是NorthWind数据库中的Employees表）

主要代码：
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.Cells[0].HasControls())
        {
            //这三个按钮的顺序为：更新、添加、删除；
            LinkButton BtnDelete = (LinkButton)e.Row.Cells[0].Controls[2];
            LinkButton BtnUpdate = (LinkButton)e.Row.Cells[0].Controls[0];
            if (BtnDelete.Text.Equals("删除"))
            {
                BtnDelete.Attributes.Add("onclick", "javascript:return confirm('" + string.Format("您确认要删除用户{0}吗？",
                                                                                                                DataBinder.Eval(e.Row.DataItem, "FirstName")) + "')");
            }
            if (BtnUpdate.Text.Equals("更新"))
            {
                BtnUpdate.Attributes.Add("onclick", "javascript:return confirm('" + string.Format("您确认要更用户{0}吗？",
                                                                                                                DataBinder.Eval(e.Row.DataItem, "FirstName")) + "')");
            }
        }
        //实现选中行变背景色；
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            CheckBox CheckSingle = e.Row.Cells[5].FindControl("CheckSingle") as CheckBox;
            CheckSingle.Attributes.Add("onclick", "javascript:changecolor(this,'" + e.Row.ClientID + "')");
        }
         /*对应的JavaScript代码为：
         * function changecolor(cbo, o)
          {
             var theBox = cbo;
             var tr = document.getElementById(o);
             if (theBox.checked)
             {
                 tr.style.backgroundColor = "Blue";
             }
             else
             {
                 tr.style.backgroundColor = "#CCCCCC";
             }
         }
         */

    }
“删除”按钮的后台代码：
    protected void btnDel_Click(object sender, EventArgs e)
    {
        EmployeeDB DB = new EmployeeDB();
        int intCount = this.GridView1.Rows.Count;
        for (int i = 0; i < intCount; i++)
        {
            CheckBox CheckSingle = this.GridView1.Rows[i].Cells[5].FindControl("CheckSingle") as CheckBox;
            if (CheckSingle.Checked)
            {
                //获取用户编号；
                int UserId = Convert.ToInt32(this.GridView1.Rows[i].Cells[1].Text);
                DB.DeleteEmployee(UserId); //由于数据库的依赖关系，不能删除用户；但具体细节就是如此；
            }
        }
        this.GridView1.DataBind(); //绑定数据；
    }