jquery控制动态生成的gridview中多列checkbox的全选反选及自动判断是否全选状态
来源：互联网 发布：仓廪实而知礼节 编辑：程序博客网 时间：2024/06/06 05:53
我们知道，动态生成的gridview，如果该gridview中存在动态模板列，如何捕获该动态模板列中的事件是难点，此Demo，实现点击动态模板列表头中的chexcbox异步全选该列数据行所有checkbox，当该列至少有一个checkbox没选中时，自动取消对应的表头选中。当数据列中全部选中时，自动选中表头中checkbox。点击表体中的checkbox时，自动更新数据表中的状态值，通过ajax异步更新。
先看下如何捕捉checkbox事件，细心的朋友可能已经发现这些动态生成的checkbox的ID属性有点特殊，是的，在表体中的checkbox我是以主键值+'_'+该列的绑定字段值来生成的，这样既保证了ID值得唯一也可以根据该主键值和字段值通过ajax更新数据库。每一个动态生成的checkbox外面都有<span class="farupdateflag">这是我有意在动态生成时给其赋的css属性让其名称和该列字段名称一致，这样就相当于给其分组了，可以通过点击对应的表头监听该类checkbox。
Gridview的前台html代码如下：
<table class="usertableborder" cellspacing="0" rules="all" border="1" id="gvEquData" style="border-collapse: collapse;"> <thead> <tr class="Freezing"> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> 序号 </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> 设备连接状态 </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <a href="javascript:__doPostBack('gvEquData','Sort$samid')">POS机编号</a> </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <span class="farupdateflag"> <input id="gvEquData_ctl01_farupdateflag" type="checkbox" name="gvEquData$ctl01$farupdateflag" /></span>FAR参数更新标识 </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <span class="rwsoftupdateflag"> <input id="gvEquData_ctl01_rwsoftupdateflag" type="checkbox" name="gvEquData$ctl01$rwsoftupdateflag" /></span>软件更新标识 </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <span class="mtksoftupdateflag"> <input id="gvEquData_ctl01_mtksoftupdateflag" type="checkbox" name="gvEquData$ctl01$mtksoftupdateflag" /></span>MTK软件更新标识 </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <a href="javascript:__doPostBack('gvEquData','Sort$mtkcsnver')">MTK中黑名单版本</a> </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <span class="rfsimsoftupdateflag"> <input id="gvEquData_ctl01_rfsimsoftupdateflag" type="checkbox" name="gvEquData$ctl01$rfsimsoftupdateflag" /></span>RFSIM软件更新标识 </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <span class="iniupdateflag"> <input id="gvEquData_ctl01_iniupdateflag" type="checkbox" name="gvEquData$ctl01$iniupdateflag" /></span>INI文件更新标识 </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <span class="posupdateflag"> <input id="gvEquData_ctl01_posupdateflag" type="checkbox" name="gvEquData$ctl01$posupdateflag" /></span>POS参数更新标识 </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <a href="javascript:__doPostBack('gvEquData','Sort$bcbeginno')">补采起始号</a> </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <a href="javascript:__doPostBack('gvEquData','Sort$bcendno')">补采截至号</a> </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <a href="javascript:__doPostBack('gvEquData','Sort$bcbegindate')">补采起始日期</a> </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <a href="javascript:__doPostBack('gvEquData','Sort$bcenddate')">补采结束日期</a> </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <a href="javascript:__doPostBack('gvEquData','Sort$bctotalcount')">补采总条数</a> </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <a href="javascript:__doPostBack('gvEquData','Sort$bccurrentcount')"> 补采已上传条数</a> </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <a href="javascript:__doPostBack('gvEquData','Sort$busno')">车辆编号</a> </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <a href="javascript:__doPostBack('gvEquData','Sort$driverno')">司机编号</a> </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <a href="javascript:__doPostBack('gvEquData','Sort$mtkusrver')">MTK中USR参数版本</a> </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <a href="javascript:__doPostBack('gvEquData','Sort$mtkfarver')">MTK中FAR参数版本</a> </th> <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <a href="javascript:__doPostBack('gvEquData','Sort$mtkparver')">MTK中PAR参数版本</a> </th> </tr> </thead> <tbody> <tr onmouseover="Color=this.style.backgroundColor;this.style.backgroundColor='RosyBrown'" onmouseout="this.style.backgroundColor=Color;" ondblclick="showDetailInfo('?id=');return false;" style="background-color: Silver;"> <td style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> 1 </td> <td style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> 否 </td> <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> </td> <td style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <span class="farupdateflag"> <input id="gvEquData_ctl02_cbx_-farupdateflag" type="checkbox" name="gvEquData$ctl02$cbx_-farupdateflag" checked="checked" /></span> </td> <td style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <span class="rwsoftupdateflag"> <input id="gvEquData_ctl02_cbx_-rwsoftupdateflag" type="checkbox" name="gvEquData$ctl02$cbx_-rwsoftupdateflag" checked="checked" /></span> </td> <td style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <span class="mtksoftupdateflag"> <input id="gvEquData_ctl02_cbx_-mtksoftupdateflag" type="checkbox" name="gvEquData$ctl02$cbx_-mtksoftupdateflag" checked="checked" /></span> </td> <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> </td> <td style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <span class="rfsimsoftupdateflag"> <input id="gvEquData_ctl02_cbx_-rfsimsoftupdateflag" type="checkbox" name="gvEquData$ctl02$cbx_-rfsimsoftupdateflag" checked="checked" /></span> </td> <td style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <span class="iniupdateflag"> <input id="gvEquData_ctl02_cbx_-iniupdateflag" type="checkbox" name="gvEquData$ctl02$cbx_-iniupdateflag" checked="checked" /></span> </td> <td style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> <span class="posupdateflag"> <input id="gvEquData_ctl02_cbx_-posupdateflag" type="checkbox" name="gvEquData$ctl02$cbx_-posupdateflag" /></span> </td> <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> </td> <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> </td> <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> </td> <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> </td> <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> </td> <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> </td> <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> 6 </td> <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> </td> <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> </td> <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> </td> <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all"> </td> </tr> </tbody> <tfoot> </tfoot> </table>js代码如下：
<script type="text/javascript"> var returnResult = function (data) { if (data == "success") { alert("删除成功！"); searchData(); } else { alert("删除失败！"); } initCheckedStaus(); } var isReturnStatus = function (data) { if (data.length >= 5) { strs = data.split(","); //字符分割 if (strs.length >= 3) { if (strs[0] == "empty") { alert('主键为空，无法更新！'); //重置选中状态 if (strs[1] == "1") { document.getElementById(strs[2]).checked = false; } else { document.getElementById(strs[2]).checked = true; } } } } initCheckedStaus(); } $(function () { //初始化全选按钮选中状态 initCheckedStaus(); checkedEvent(); //删除查询数据 deleteSearchData(); }); //删除查询数据 function deleteSearchData() { $("#btnDelete").click(function () { { if (confirm("确定要删除查询到的数据吗？") == true) { $.post("Ajax/DeleteHandler.ashx", { "action": "delete", "eqnStatus": $('#<%=ddlEquStatus.ClientID %>').val() }, returnResult); } } }) } //即时监听表头复选框状态 function initCheckedStaus() { $(function () { //即时监听表头复选框状态 $("thead input[type='checkbox']").each(function () { var id = $(this).attr("id"); var name = id.substr(16); var v1 = "tbody ." + name; var v = v1 + " input[type='checkbox']"; var h = "thead ." + name; if ($(v).length == $(v1 + " input:checked").length) { $("#gvEquData_ctl01_" + name).attr("checked", true); } else { $("#gvEquData_ctl01_" + name).attr("checked", false); } }); }); } //监听复选框单机事件 function checkedEvent() { $(function () { //监听表中复选框单击事件 $("tbody").find("input:checkbox").each(function (key, val) { $(val).click(function () { var cbxId = $(this).attr("id"); var state = $(this).attr("checked"); $.post("Ajax/UpdateStatus.ashx", { "id": cbxId, "isChecked": state, "fid": "SamID" }, isReturnStatus); }); }); //监听标题中复选框单机事件 $("thead").find("input:checkbox").click( function () { if (confirm("确定要更新这一列数据吗？") == true) { var cbxId = $(this).attr("id"); var name = cbxId.substr(16); var v = "tbody ." + name + " input[type='checkbox']"; if ($(this).attr("checked") == "checked") { $(v).attr("checked", true); } else { $(v).attr("checked", false); } var state = $(this).attr("checked"); $.post("Ajax/UpdateStatus.ashx", { "id": cbxId, "isChecked": state }, isReturnStatus); } else { if ($(this).attr("checked") == "checked") { $(this).attr("checked", false); } else { $(this).attr("checked", true); } } }); }); } //清除查询条件 function chearData() { var lineNo = document.getElementById('<%=txtLineNO.ClientID %>'); var deviceNo = document.getElementById('<%=txtDeviceNO.ClientID %>'); var busNo = document.getElementById('<%=txtBusNO.ClientID %>'); lineNo.value = ""; deviceNo.value = ""; busNo.value = ""; $('#<%=ddlEquStatus.ClientID %>').val("All"); } //显示详情页面 function showDetailInfo(url) { //showWin(800, 540, "EquStatusDetail.aspx" + url, "detail"); open_Dialog("EquStatusDetail.aspx" + url, window, 800, 564); } //显示设置页面 function showSet(url) { //showWin(800, 600, "FieldShowSet.aspx" + url, "set"); open_Dialog("FieldShowSet.aspx" + url, window, 800, 640); } //触发查询事件 function searchData() { var btn = document.getElementById("<%=btnQuery.ClientID %>"); btn.click(); } function load() { var divGvData = document.getElementById("divGvData"); var h; if (navigator.userAgent.indexOf("MSIE") > 0) { h = document.documentElement.clientHeight - 80; } else { h = document.documentElement.clientHeight - 86; } //初始化滚动高度 divGvData.style.height = h + "px"; //处理ajax和ScriptManager的冲突 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); } function EndRequestHandler() { checkedEvent(); deleteSearchData(); initCheckedStaus(); } </script>ajax代码如下：
public class UpdateStatus : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; int isChecked = context.Request["isChecked"] == "checked" ? 1 : 0; string colId=context.Request["id"]; string name = colId.Substring(colId.LastIndexOf('_')+1, colId.Length - colId.LastIndexOf('_')-1); int result=0; if (QuarrysClass.CheckFlag.ToLower().IndexOf("@" + name + "@") != -1) { string selectStr = QuarrysClass.StrWhere; //控制前台刷新 result = EquSearchBll.equBll.UpdateAllChecked(name, isChecked, selectStr) == 1 ? 2 : EquSearchBll.equBll.UpdateAllChecked(name, isChecked, selectStr); } else { if (name.Contains('-')) { string idName = context.Request["fid"]; string[] arrays = name.Split('-'); string id = arrays[0]; if (string.IsNullOrEmpty(id)) //主键为空无法更新 { context.Response.Write("empty," + isChecked+"," + colId); return; } string fieldName = arrays[1]; string strWhere = string.Format(" and {0}='{1}'",idName,id); result = EquSearchBll.equBll.UpdateAllChecked(fieldName, isChecked, strWhere); } } context.Response.Write(result); } public bool IsReusable { get { return false; } } }- jquery控制动态生成的gridview中多列checkbox的全选反选及自动判断是否全选状态
- jquery 对checkbox的控制（全选，反选）
- JQuery实现的 checkbox 全选、反选。
- JQuery实现的 checkbox 全选、反选。
- jquery checkbox的全选和反选
- checkbox的全选及反选
- jquery 动态创建checkbox全选 反选
- jQuery操作动态生成的Checkbox，完成全选和反选，以删除某一行或几行
- 【jQuery】jQuery实现checkbox的全选/反选逻辑
- JQuery 判断checkbox是否选中，checkbox全选反选，以及执行click事件
- jquery checkbox 全选 反选
- jQuery CheckBox全选、反选
- jquery checkbox全选/反选
- Jquery实现checkbox的全选、反选功能代码
- jQuery操作 checkbox 的全选、反选 , radio, select 功能
- 用Jquery实现checkbox的反选、全选、全不选
- jQuery(5)--实现checkbox的全选,反选，全不选功能
- jquery 实现checkbox的全选 全不选 反选
- poj 3083
- HDU 4403 A very hard Aoshu problem
- jquery & js 获取浏览器、屏幕高度
- poj 2251
- 算法导论 DP 矩阵链乘法
- jquery控制动态生成的gridview中多列checkbox的全选反选及自动判断是否全选状态
- （apple官方文档译文）表视图样式和扩展视图-Table View Styles and Accessory Views
- UIViewController的跳转方式
- CodeForces 141B - Hopscotch
- poj 3624 最基本01背包问题
- 边看边写（判断一个序列是否为出栈序列）
- centos 修改系统时间
- ACE前摄器Proactor模式
- 关于android开发中手机连接不上eclipse问题
