如何通过网格外的选项检查jqgrid复选框

Question

我有一个带有复选框作为前导列的 jqgrid。我需要能够使用网格之外的选项组来检查所有或取消检查所有或检查一些行

<input id="rblAll" type="radio" name="rblOptStatus" value="All"/>Check All
<input id="rblNone" type="radio" name="rblOptStatus" value="None"/>Uncheck All
<input id="rblSome" type="radio" name="rblOptStatus" value="Some"/>Check 60%
<input id="rblReset" type="radio" name="rblOptStatus" value="Reset"  checked="checked" />Reset

所以我的网格是 loadOnce: true 而 multiselect 是 false。列模型是

colModel: [
        { name: 'ab', index: 'ab', width: 50, sortable: true, search: false, align: 'center', editable: true, formatter: 'checkbox', formatoptions: { disabled: false }, edittype: 'checkbox', editoptions: { value: 'True:False' } },

这是我尝试使用的代码，但未设置复选框。

$("input[name=rblOptStatus]").change(function () {
    var OptStatus = $("input[name=rblOptStatus]:checked").val()
    if (OptStatus == 'All') {
        var rows = jQuery("#grdOptionsGrid").getDataIDs();
        for (a = 0; a < rows.length; a++) {
            var q = jQuery("#grdOptionsGrid").jqGrid('getCell', rows[a], 'ab'); // displays true, for a checked record.
            if (q == 'False') {
                //MsgBox(q);
                //jQuery("#grdOptionsGrid").jqGrid('getCell', rows[a], 'ab').prop('checked', true);
                $(this).prop('checked', 'True')
            }
        }

那么我应该如何遍历网格然后选中/取消选中行复选框。

感谢您的帮助

Answer 1

您应该使用getGridRowById 来获取行的DOM 元素（<tr>）。方法getCell 获取值（文本），您不能使用.prop('checked', true) 来检查复选框。固定代码可能像

$("input[name=rblOptStatus]").change(function () {
    var status = $("input[name=rblOptStatus]:checked").val(),
        $grid = $("#grdOptionsGrid"),
        ids = $grid.jqGrid("getDataIDs"),
        setCheckboxes = function (maxIndex, value) {
            var i, $checkbox;
            for (i = 0; i < maxIndex; i++) {
                $checkbox = $($grid.jqGrid('getGridRowById', ids[i]))
                        .children('td[aria-describedby="grdOptionsGrid_ab"]')
                        .find('input');
                if ($checkbox.is(":checked") !== value) {
                    $checkbox.prop('checked', value);
                }
            }
        };
    switch (status) {
        case 'All':
            setCheckboxes(ids.length, true);
            break;
        case 'None':
            setCheckboxes(ids.length, false);
            break;
        default: //Check 60%
            setCheckboxes(ids.length, false);
            setCheckboxes(ids.length*0.6, true);
    }
});

见https://jsfiddle.net/OlegKi/ef6zp25g/