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事件调用onclick=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);
      
    }

编译,查看效果,到这里功能全部实现。

posted @ 2005-08-10 00:40  meteorcui  阅读(1366)  评论(0编辑  收藏  举报