如何在GridView中加上CheckBox的全选功能

如何在GridView中加上CheckBox的全选功能,第1张

◆请在新增的样板栏位中的HeaderTemplate加入一个CheckBox作为全选用,然後在ItemTemplate也加入一个CheckBox,如下方<asp:TemplateField><headertemplate><asp:CheckBoxID="CheckAll"runat="server"onclick="javascript: SelectAllCheckboxes(this)"Text="全选/取消"ToolTip="按一次全选,再按一次取消全选"/></headertemplate><itemtemplate><asp:CheckBoxID="CheckBox2"runat="server"Text=" 全选"/></itemtemplate></asp:TemplateField>◆接者请在该页面的最底部加上以下的Java Script<script type="text/javascript">functionSelectAllCheckboxes(spanChk) { elm=document.forms[0]for(i=0i<= elm.length-1i++) { if(elm[i].type=="checkbox"&&elm[i].id!=spanChk.id) { if(elm.elements[i].checked!=spanChk.checked) elm.elements[i].click()} } }</script>★注意事项:如果您的页面有套用MasterPage请将上方JS放在标签上面?小铺废言:到这里就已经完成了全选和取消全选的功能了,您可以自行测试看看,再来我们要制作修改的部份(你总不会做出全选/取消的功能只是让使用者按好玩的吧)◆接者在页面上放置一个按钮(Button),对按钮点两下,切换到程式部份◆切换到程式部份後我们利用以下code去抓出哪些列(ROW)有被打勾copytextpop-upint ifor(i =0i <this.GridView1.Rows.Counti++){if(((CheckBox)GridView1.Rows[i].FindControl("CheckBox2")).Checked){Response.Write(GridView1.DataKeys[i].Value.ToString())//GridView1.DataKeys[i].Value.ToString() 可以抓到该列的DataKeys的值,我设定的是pk值}}★注意事项:如果您的GridVie没有设定 DataKeyNames="资料栏位"那上方的code就列不出pk值唷?小铺废言:利用以上方式您就可以准确的抓出哪些列有被使用者打勾,来作其他您要执行的程式了

为了保持风格一致,当然是拖devexpress中的checkbox到gridview的复选框列的标头,把它当做全选框,然后把gridview的复选框列的最大宽度和最小宽度设置为20。这样就免去了绘制全选框的步骤,最后提醒一下,无需对复选框列做任何设置。以下代码就是添加复选框全选功能并取值的步骤。第一步简单但也最重要就是给绑定到gridview的数据源加上自定义的一列,这是你会发现gridview的复选框列自动变成了复选框第二步,checkbox控件的事件中为gridview的复选框列循环赋值。这样实现了全选或者全不选的功能第三步,取复选框被选中的行的值1.在想gridview绑定的数据源中加入一行数据DataTable dt = GetDataSource()dt.Columns.Add("check", System.Type.GetType("System.Boolean"))gridControl1.DataSource = dt2.在gridview的全选框的CheckedChanged的事件中添加以下代码用于实现全选的效果:private void checkEdit1_CheckedChanged(object sender, EventArgs e){for (int i = 0i <gridView1.RowCounti++) //循环gridView1的行{gridView1.GetDataRow(i)["check"] = (Boolean)checkEdit1.EditValue//将选复选框列的值和全选框的值统一}}3.获取被选中的行的数据结果private void GetCheck(){string value = ""//变量,存储行的选中值string strSelected = ""//想要的结果。可以为任意的类型


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11962440.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存