jquery - jQgrid:禁用复选框和行(有条件)

Question

基于flag_status从 PHP 数据数组传递，我需要禁用行和复选框。另外防止选择禁用的行以支持 select all多选列标题中的复选框

jQuery("#grid").jqGrid({
    url:call_url,
        datatype: "json",
    height: 'auto',
    rowNum: 20,
    rowList: [20,30,40],
    colNames:[<?php echo $col;?>],
    colModel:[
                {name:'USER_ID',index:'USER_ID', align:'center',search:false,hidden:true,key:true},
        {name:'PROJECT_NAME',index:'PROJECT_NAME', align:'center',search:false,hidden: true},
        {name:'EMP_NAME',index:'EMP_NAME', sortable:true,summaryType:'count',summaryTpl : 'Total ({0}) Resource Hours' },
        <?php for($i=1;$i<=count($cal_arr);$i++) {?>
        {name:'<?php echo $i;?>',index:'<?php echo $i;?>',search:false,align:"center",sortable:false ,width:80 },
        <?php } ?>
    ],
    pager: "#page",
        multiselect: true,
    shrinkToFit :true,
    autowidth: true,
    viewrecords: true,
    grouping: true, 
    groupingView : { groupField : ['PROJECT_NAME'], 
                    groupColumnShow : [false], 
                    groupText : ['<b>{0}</b>'],
                    groupCollapse : false, 
                    groupOrder: ['asc'], 
                    groupSummary : [true], 
                    showSummaryOnHide: true,
                    groupDataSorted : true },
    sortname: 'EMP_NAME',
    caption: "Programatically block selection of some grid row',
    gridComplete: function () {
                    var recs = $("#grid").getGridParam("records");
                    $( ".mycontent" ).remove();
                    if (recs == 0 || recs == null) {
                        $('#grid').after("<div class='mycontent' style='color:red;text-align:center'>No Record Found</div>");
                        $("#btn_submit").hide();
                    }
            },


            loadComplete: function() {
                // we make all even rows "protected", so that will be not selectable
                var cbs = $("tr.jqgrow > td > input.cbox:even", jQuery("#grid")[0]);
                cbs.attr("disabled", "disabled");
            },
            beforeSelectRow: function(rowid, e) {
                var cbsdis = $("tr#"+rowid+".jqgrow > td > input.cbox:disabled", jQuery("#grid")[0]);
                if (cbsdis.length === 0) {
                    return true;    // allow select the row
                } else {
                    return false;   // not allow select the row
                }
            },
            onSelectAll: function(aRowids,status) {
                if (status) {
                    // uncheck "protected" rows
                    var cbs = $("tr.jqgrow > td > input.cbox:disabled", jQuery("#grid")[0]);
                    cbs.removeAttr("checked");

                    //modify the selarrrow parameter
                    jQuery("#grid")[0].p.selarrrow = jQuery("#grid").find("tr.jqgrow:has(td > input.cbox:checked)")
                        .map(function() { return this.id; }) // convert to set of ids
                        .get(); // convert to instance of Array
                }
            }

})

感谢@Oleg 小demo ，但不完全满足以下要求。

无法使用key:true对于 flag_status因为它的 bieng 用于 user_id

这里它禁用所有偶数行，因此将不可选，但仅当值为 flag_status = 1 时才需要禁用。如何在 jQgrid 中传递该值并禁用行(添加类 ui-state-disabled )并防止选中复选框(使其也被禁用)？

HTML 结构:

<tr class="ui-widget-content jqgrow ui-row-ltr" tabindex="-1" id="13234" role="row" aria-selected="false">
<td aria-describedby="grid_cb" style="text-align:center;width: 20px;" role="gridcell">
<input type="checkbox" name="jqg_grid_13234" class="cbox" id="jqg_grid_13234" role="checkbox" disabled="disabled">
</td>
</tr>

这里USER_ID设置为<tr>和<input> ，而不是 flag_status应设置为 <tr>和USER_ID上<input> 。如果flag_status值为1 ，类ui-state-disabled应添加到 <tr>制作<input>已禁用。

版本 - jqGrid 4.6.0

Answer 1

您引用的我的演示已经很旧了。我修改为the following哪个更符合您的要求。

我在演示中使用

rowattr: function (item) {
    if (parseInt(item.ID, 10) % 3 === 0) {
        return {"class": "ui-state-disabled ui-jqgrid-disablePointerEvents"};
    }
},
beforeSelectRow: function (rowid, e) {
    if ($(e.target).closest("tr.jqgrow").hasClass("ui-state-disabled")) {
        return false;   // not allow select the row
    }
    return true;    // allow select the row
}

其中类 ui-jqgrid-disablePointerEvents 有以下 CSS 规则:

.ui-jqgrid-disablePointerEvents {
    pointer-events: none;
}

您可以轻松修改rowattr的代码，以便根据item.flag_status的值而不是item.ID禁用行> 我在上面的演示中使用了它。