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);
}
编译,查看效果,到这里功能全部实现。