GridView中加上CheckBox 的全选功能的代码
2013-03-11 00:00
585 查看
首先我們當然是要先做出一個有資料的GridView
GridView做好後,我們在後方新增一個樣板欄位(TemplateField)
請在新增的樣板欄位中的HeaderTemplate加入一個CheckBox作為全選用,然後在ItemTemplate也加入一個CheckBox
接著請在該頁面的最底部加上以下的Java Script
如果您的頁面有套用MasterPage請將上方JS放在</asp:Content>標籤上面,到這裡就已經完成了全選和取消全選的功能了,您可以自行測試看看,再來我們要製作修改的部份(你總不會做出全選/取消的功能只是讓使用者按好玩的吧), 接著在頁面上放置一個按鈕(Button),對按鈕點兩下,切換到程式部份, 切換到程式部份後我們利用以下code去抓出哪些列(ROW)有被打勾
如果您的GridVie沒有設定 DataKeyNames="資料欄位"那上方的code就列不出pk值唷
利用以上方式您就可以準確的抓出哪些列有被使用者打勾,來作其他您要執行的程式了
GridView做好後,我們在後方新增一個樣板欄位(TemplateField)
請在新增的樣板欄位中的HeaderTemplate加入一個CheckBox作為全選用,然後在ItemTemplate也加入一個CheckBox
<asp:TemplateField> <HeaderTemplate> <asp:CheckBox ID="CheckAll" runat="server" onclick= "SelectAllCheckboxes(this);" Text="全選/取消" ToolTip="按一次全選,再按一次取消全選" /> </HeaderTemplate> <ItemTemplate> <asp:CheckBox ID="CheckBox2" runat="server" Text="全選"/> </ItemTemplate> </asp:TemplateField>
接著請在該頁面的最底部加上以下的Java Script
<script type="text/javascript"> function SelectAllCheckboxes(spanChk) { elm=document.forms[0]; for(i=0;i<elm.length;i++) { if(elm[i].type=="checkbox" && elm[i].id!=spanChk.id) { if(elm.elements[i].checked!=spanChk.checked) elm.elements[i].click(); } } } </script>
如果您的頁面有套用MasterPage請將上方JS放在</asp:Content>標籤上面,到這裡就已經完成了全選和取消全選的功能了,您可以自行測試看看,再來我們要製作修改的部份(你總不會做出全選/取消的功能只是讓使用者按好玩的吧), 接著在頁面上放置一個按鈕(Button),對按鈕點兩下,切換到程式部份, 切換到程式部份後我們利用以下code去抓出哪些列(ROW)有被打勾
int i; for (i = 0; i < this.GridView1.Rows.Count; i++) { 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值唷
利用以上方式您就可以準確的抓出哪些列有被使用者打勾,來作其他您要執行的程式了
相关文章推荐
- GridView中加上CheckBox 的全选功能的代码
- 如何在 GridView 中加上 CheckBox 的全选功能
- GridView控件的选择功能,代码实现CheckBox控件的全选、反选以及取消
- GridView联合CheckBox实现全选功能[百度空间搜集]
- 【转载】利用JavaScript实现GridView中表头CheckBox的全选功能
- 全选/取消 gridview中checkbox的功能实现
- GridView内嵌checkbox的全选功能
- ASP.NET Gridview与checkbox全选、全不选实现代码
- 利用JavaScript实现GridView中表头CheckBox的全选功能
- jquery全选checkBox功能实现代码(取消全选功能)
- 利用JavaScript实现GridView上方的 全选中,全驳回 控制 GridView中 CheckBox的功能
- DEV控件中GridView中的复选框与CheckBox实现联动的全选功能
- GridView中实现类邮件的CheckBox全选功能
- 利用JavaScript实现GridView中表头CheckBox的全选功能
- GridView 添加checkBox 实现全选功能
- 比较全的JS checkbox全选、取消全选、删除功能代码
- 给gridview添加checkBox 并且做全选功能
- GridView控件中模板列CheckBox全选、反选、取消实现代码
- JS小功能(checkbox实现全选和全取消)实例代码