gridview checkbox从服务器端和客户端两个方面实现全选和反选

GridView中的checkbox的全选和反选在很多的地方都是要求实现的,所以下面就从服务器端和客户端两个方面实现了checkbox的选择,感兴趣的朋友可以了解下,希望本文对你有所帮助

GridView中的checkbox的全选和反选在很多的地方都是要求实现的,所以下面就从服务器端和客户端两个方面实现了checkbox的选择。
1.服务器端
html代码如下:
复制代码 代码如下:

DataKeyNames="ID" DataSourceID="SqlDataSource1">









ReadOnly="True" SortExpression="ID" />



其中关于数据的获取不是重点,所以就选择了使用sqldatasource控件来实现数据的获取。 GridView中使用了BoundField绑定了ID,num这两个数据表的字段。在上面的HTML代码中,使用了模板列









header部分是全选的checkbox,item的部分是单个的checkbox部分。 (请注意AutoPostBack要设置为true,要不然无法触动服务器端的代码)
具体的后台的代码
复制代码 代码如下:

protected void CheckAll_CheckedChanged(object sender,EventArgs e)
{
CheckBox ck = sender as CheckBox;
if (ck != null)
{
System.Web.UI.WebControls.GridView g = ck.NamingContainer.NamingContainer as System.Web.UI.WebControls.GridView;
for (Int32 i = 0; i {
(g.Rows[i].FindControl("CheckBox1") as CheckBox).Checked = ck.Checked;
}
}
}
protected void CheckBox1_CheckedChanged(object sender,EventArgs e)
{
var count = 0;
CheckBox ck = sender as CheckBox;
if (ck != null)
{
System.Web.UI.WebControls.GridView g = ck.NamingContainer.NamingContainer as System.Web.UI.WebControls.GridView;
for (Int32 i = 0; i {
if ((g.Rows[i].FindControl("CheckBox1") as CheckBox).Checked)
{
count++;
}
}
(g.HeaderRow.FindControl("CheckAll") as CheckBox).Checked =count==g.Rows.Count;
}
}

运行页面以后,可以看到点击全选的checkbox,可以选择全部。取消了全选的checkbox,那所以的checkbox也取消选中。如果单个的checkbox全选中一个,那全选的checkbox也选中。如果有一个单个的checkbox没有选中,那全选的checkbox也不选中。
下面来说说客户端的实现:
html代码部分,请去除掉两个checkbox的OnCheckedChanged和AutoPostBack。其他的不变。
复制代码 代码如下:


以上就是gridview checkbox从服务器端和客户端两个方面实现全选和反选的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » ASP编程