javascript 实现 DataGrid中复选框的全选

 

1.添加datagrid或者2005的GridView

2.添加一个数据绑定列ID

3.添加模板列，HeaderTemplate中放一个html的checkbox控件，命名cbx_selAll;

   ItemTemplate中放一个html的checkbox控件，命名cbx_sel，runat=server；（这里之所以runat=server是因为在后台代码中要findcontrol。

4.添加一个全选的javascript函数

function SelectAll(sender)
{
//全选函数，可通用
//此函数在全选checkbox的onclick事件调用
var chks=document.documentElement.getElementsByTagName("input");
//这里input是html控建的checkbox的控件类型，不是id,下面这句也可以
//var chks=document.all.tags("input");
for(var i=0;i<chks.length;i++)
{
   if(chks[i].id="cbx_sel")//chb_sel是checkbox的id
   chks[i].checked=sender.checked;
}
}

5.select_All控件的onclick事件调用οnclick=SelectAll(this);

6.编译，查看效果。第一步全选已经实现。

7.全选不是最终目的，获得全选的列，进行删除操作才是最终目的。

8.添加一个button控件，命名btn_del；

9.添加一个javascript函数，在用户全选后，点击btn_del时提示用户。
function ShowMessage()
{
//此函数用于判断用户是否选中了checkbox
var cxbList=document.all.tags("input");
for(var i=0;i<cxbList.length;i++)
{
   if(cxbList[i].id="cbx_sel" && cxbList[i].checked)
   {
      return confirm("您确定要删除所选择的数据吗?");
   }
  
  
  
}
  alert("请选择您要删除的数据!");
  return false;
}

10.在btn_del的OnClientClick中调用此函数OnClientClick="return ShowMessage();" OnClientClick事件好像是VS2005中新增的事件。

11,在btn_del的click事件中编写后台代码

protected void btn_Del_Click(object sender, EventArgs e)
    {
        string dgIDs = "";
        //bool BxsChkd = false;
        //遍历GridRow，获取checkbox控件
        foreach (GridViewRow row in this.GridView1.Rows)
        {
            HtmlInputCheckBox deleteChkBxItem =
                (HtmlInputCheckBox)row.Cells[0].FindControl("cbx_sel");
            //判断checkbox是否被选中
            if (deleteChkBxItem.Checked)
            {
                //获取被选中的checkbox所在行的ID列值，并连接成字符串
                dgIDs += ","+row.Cells[1].Text ;
            }
        }
        //执行删除
        if (dgIDs.Length <= 0)
            return;

        if (Course.DoPublish(dgIDs.Substring(1)))
        {
            Pub.ShowMessage("删除成功!", this);
            BindGridView();
        }
        else
            Pub.ShowMessage("删除失败!", this);
      
    }