zoukankan      html  css  js  c++  java
  • jquery控制动态生成的gridview中多列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(&#39;gvEquData&#39;,&#39;Sort$samid&#39;)">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(&#39;gvEquData&#39;,&#39;Sort$mtkcsnver&#39;)">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(&#39;gvEquData&#39;,&#39;Sort$bcbeginno&#39;)">补采起始号</a>
                    </th>
                    <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
                        <a href="javascript:__doPostBack(&#39;gvEquData&#39;,&#39;Sort$bcendno&#39;)">补采截至号</a>
                    </th>
                    <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
                        <a href="javascript:__doPostBack(&#39;gvEquData&#39;,&#39;Sort$bcbegindate&#39;)">补采起始日期</a>
                    </th>
                    <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
                        <a href="javascript:__doPostBack(&#39;gvEquData&#39;,&#39;Sort$bcenddate&#39;)">补采结束日期</a>
                    </th>
                    <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
                        <a href="javascript:__doPostBack(&#39;gvEquData&#39;,&#39;Sort$bctotalcount&#39;)">补采总条数</a>
                    </th>
                    <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
                        <a href="javascript:__doPostBack(&#39;gvEquData&#39;,&#39;Sort$bccurrentcount&#39;)">
                            补采已上传条数</a>
                    </th>
                    <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
                        <a href="javascript:__doPostBack(&#39;gvEquData&#39;,&#39;Sort$busno&#39;)">车辆编号</a>
                    </th>
                    <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
                        <a href="javascript:__doPostBack(&#39;gvEquData&#39;,&#39;Sort$driverno&#39;)">司机编号</a>
                    </th>
                    <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
                        <a href="javascript:__doPostBack(&#39;gvEquData&#39;,&#39;Sort$mtkusrver&#39;)">MTK中USR参数版本</a>
                    </th>
                    <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
                        <a href="javascript:__doPostBack(&#39;gvEquData&#39;,&#39;Sort$mtkfarver&#39;)">MTK中FAR参数版本</a>
                    </th>
                    <th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
                        <a href="javascript:__doPostBack(&#39;gvEquData&#39;,&#39;Sort$mtkparver&#39;)">MTK中PAR参数版本</a>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr onmouseover="Color=this.style.backgroundColor;this.style.backgroundColor=&#39;RosyBrown&#39;"
                    onmouseout="this.style.backgroundColor=Color;" ondblclick="showDetailInfo(&#39;?id=&#39;);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">
                        &nbsp;
                    </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">
                        &nbsp;
                    </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">
                        &nbsp;
                    </td>
                    <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
                        &nbsp;
                    </td>
                    <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
                        &nbsp;
                    </td>
                    <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
                        &nbsp;
                    </td>
                    <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
                        &nbsp;
                    </td>
                    <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
                        &nbsp;
                    </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">
                        &nbsp;
                    </td>
                    <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
                        &nbsp;
                    </td>
                    <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
                        &nbsp;
                    </td>
                    <td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
                        &nbsp;
                    </td>
                </tr>
            </tbody>
            <tfoot>
            </tfoot>
        </table>

    js代码如下:

       <script type="text/javascript">
            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 () {
                //初始化全选按钮选中状态
                $("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);
                    }
                });
    
                //监听表中复选框单击事件
                $("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 = "";
            }
            //即时监听复选框状态
            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 showDetailInfo(url) {
                showWin(800, 560, "EquStatusDetail.aspx" + url, "detail");
            }
            //显示设置页面
            function showSet(url) {
                showWin(800, 600, "ShowSet.aspx" + url,"set");
            }
            //触发查询事件
            function searchData() {
                var btn = document.getElementById("<%=btnQuery.ClientID %>");
                btn.click();
            }
            //处理ajax和ScriptManager的冲突
            function load() {
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
            }
            function EndRequestHandler() {
                $(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);
                                    }
                                }
                            });
                });
                 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;
                }
            }
        }



  • 相关阅读:
    http
    jquery
    wsgi
    urls控制器
    模板template
    ORM
    C++中获取汉字拼音首字缩写/全拼及生僻字的处理
    C语言函数strstr
    CString 成员函数用法
    判断字符串中是否存在中文
  • 原文地址:https://www.cnblogs.com/james1207/p/3303802.html
Copyright © 2011-2022 走看看