Question

我在这里面临一个问题。当我检查所有行checbox时，标题复选框似乎没有自动检查。此外，它反之亦然。

 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 });
});

应该如下图所示。

如何实现这一目标？

Answer 1

您可以在onSelectRow jqgrid事件中执行此操作。如果所有行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

Answer 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
    }
})

当表中选中所有复选框时，JQgrid不检查标题复选框

2 个答案:

DEMO