当表格中的所有复选框都被选中时，JQgrid 不检查标题复选框答案

【问题标题】：JQgrid not checking the Header Checkbox when all checkboxes are checked in the table当表格中的所有复选框都被选中时，JQgrid 不检查标题复选框
【发布时间】：2015-12-24 08:24:11
【问题描述】：

在这里我遇到了一个问题。当我检查所有行复选框时，标题复选框似乎没有自动检查。而且反之亦然。

 datatype: "json",
    contentType: 'application/json',
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    colNames: ['Id', 'Machine Name', 'IP Address', 'Discovered Date', 'Agent Install Status', 'Agent Installation Date', 'Agent Status', 'Agent Version', 'Last HeartBeat Received'],
    colModel: [            
        { name: 'id', hidden: false, width: 20, key: true, sorttype: 'int', search: true },
        { name: 'machineName', width: 120, search: true },
        { name: 'ipAddress', width: 60, search: true },
        //{ name: 'discoveredDate', width: 110, formatter: 'date', formatoptions: { srcformat: 'y-m-d', newformat: 'l, F d, Y' } },
        { name: 'discoveredDate', width: 110, search:true, formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i:s A" } },
        { name: 'agentInstallStatus', width: 100, search: true },
        { name: 'agentInstallationDate', width: 110, search:true, formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i:s A" } },
        { name: 'agentStatusName', width: 60, search: true },
        { name: 'agentVersion', width: 50, search: true },
        { name: 'lastHeartBeatRecieved', width: 110, search:true,formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i:s A" } }
    ],
    rowattr: function (rd) {
        if (rd.agentInstallStatus != 'Completed' && rd.agentInstallStatus != 'Upgrade Completed' && rd.agentInstallStatus != 'Uninstallation Failed') {
            return {
                "class": "ui-state-disabled ui-jqgrid-disablePointerEvents"
            };
        }
    },

    sortname: 'id',
    sortorder: 'asc',
    loadonce: true,
    viewrecords: true,
    gridview: true,      
    width: gwdth,
    height: 650,
    sortable:true,
    rowNum: 30,        
    rowList: [10, 20, 30],
    mtype: 'GET',
    multiselect: true,
    multipleSearch: true,
    pager: "#jqGridPager",

    onSelectRow: function () {
        var s_row = $("#jQGridMonitoredMachines").jqGrid('getGridParam', 'selarrrow');
        var a_row = $('#jQGridMonitoredMachines').jqGrid('getDataIDs');
        if (s_row.sort(function (a, b) {
            return a - b
        }
            ).join() == a_row.sort(function (a, b) {
                return a - b
        }
            ).join()) {
            $('#cb_list').prop('checked', true);
        }
    },
    loadBeforeSend: function (xhr) {
        var authData = localStorageService.get('authorizationData');

        if (authData) {
            xhr.setRequestHeader("Authorization", 'Bearer ' + authData.token);
        }
        return xhr;
    }
});

jQuery("#jQGridMonitoredMachines").jqGrid('navGrid', '#jqGridPager',
{ edit: false, add: false, del: false, search: true }, {}, {}, {}, { closeAfterSearch: true });
});

应该如下图所示。

如何做到这一点？

【问题讨论】：

标签： jquery checkbox jqgrid

【解决方案1】：

您可以在jqgrid 的onSelectRow 事件中执行此操作。如果所有行 ID 和选定行 ID 相等，则设置主复选框 checked 属性 true。

onSelectRow: function(){
    var s_row = $("#list").jqGrid('getGridParam','selarrrow');
    var a_row = $('#list').jqGrid('getDataIDs');
    if(s_row.sort(function(a, b){return a-b}).join()==
                a_row.sort(function(a, b){return a-b}).join()){
        $('#cb_list').prop('checked', true);            
    }
}

DEMO

【讨论】：

我已经在我的代码中实现了你的代码，但我没有得到#cb_list 是什么。我已经用#jQGridMonitoredMachines 替换了#list。你能帮我解决这个问题吗
如果你的grid id 是jQGridMonitoredMachines，你应该使用#cb_jQGridMonitoredMachines。 @AbhishekPandey
：嘿，谢谢 azim，它对我有用。但是你能解释一下#jQGridMonitoredMachines 和#cb_jQGridMonitoredMachines 之间的区别吗，
jqGrid plugin create header checkbox with the id in cb_yourgridid format.

【解决方案2】：

如果您使用的是 JQuery，您可以像这样将自己的代码添加到页面中

$("input[type=checkbox]").click(function(){
var totalCheckbox = 10;// all your checkboxes excluding the Header check box
var checkedOnes = $("input[type=checkbox]:checked").val().length; //all boxes that are checked

if(checkedOnes ==totalCheckbox ){
    $(".headerCheckBox").attr("checked","checked");// check the header check box
    }
})

【讨论】：