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来获取行（<tr>）的DOM元素。方法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/

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

1 个答案: