有没有办法在 jqgrid 中禁用复选框？

Question

我正在尝试禁用 jqgrid 中的复选框输入。

我在字段的 colModel 数组上使用了这个自定义格式化程序

formatter: function (cellvalue, options, rowObject)
           {
                return '<input type="checkbox" value="' + cellvalue + '" ' + (rowObject.IsActive== true ? 'checked="checked"' : '') + ' ' + (rowObject.IsEnabled == false ? 'disabled="disable"' : '') + '/>';
           }

这项工作是因为我希望在允许时可以检查某些行，但问题是当我检查任何这些行时，我得到的值如下：

$('#jqgTable').jqGrid('getCell', id, 'IsActive');

返回输入 html 标记 <input type="checkbox" value="true" checked="checked">，但使用 $($('#jqgTable').jqGrid('getCell', "idSelected", 'IsActive')).is(':checked') 始终是 true。

在我使用formatter: "checkbox" 和$('#jqgTable').jqGrid('getCell', id, 'IsActive'); 之前，我得到了Yes 或No，所以我可以做我需要的事情，但所有复选框都已启用。

我也尝试过其他解决方案

我用 formatter: "checkbox" 和函数

    beforeSelectRow: function (rowid, e) {
        var $target = $(e.target);
        if ($target.is(":checkbox")) {
            var canChange = $("#jqgTable").jqGrid('getRowData', rowid).IsEnabled == 'false' ? false : true;
            if ($("#jqgTable").jqGrid('getRowData', rowid).IsEnabled == 'false' ? false : true) {
                UpdateState(rowid);
            }
            else
            {
                e.preventDefault();
            }
        }
        return true;
    },

这可行，但复选框看起来我可以更改它。

所有代码都使用第一个选项

    $("#jqgTable").jqGrid({
        data: data,
        datatype: "local",
        colNames: [
            'Checkbox'
            ,'Enable'
        ],
        colModel: [    
            {
                name: 'IsActive', label: "Active", width: 100,
                //formatter: 'checkbox',
                align: "center", stype: "select",
                searchoptions: { sopt: ["eq", "ne"], value: "true:Si;false:No" },
                editable: true, edittype: 'checkbox', formatoptions: { disabled: false },
                formatter: function (cellvalue, options, rowObject)
                {
                    return '<input type="checkbox" value="' + cellvalue + '" ' + (rowObject.IsActive == true ? 'checked="checked"' : '') + ' ' + (rowObject.IsEnable == false ? 'disabled="disable"' : '') + '/>';
                }
            },
            { 
                name: 'IsEnable', label: '', width: 1, hidden: true 
            },
        ],
        rowNum: 10,
        mtype: 'GET',
        loadonce: true,
        rowList: [5, 10, 20, 30, 40, 50],
        pager: '#jqgTablePager',
        sortable: true,
        multiselect: false,
        pageable: true,
        viewrecords: true,
        sortorder: 'desc',
        gridview: true,
        autowidth: false,
        width: 100,
        shrinkToFit: false,
        altRows: true,       
        altclass: "myAltRowClass",       
        gridComplete: function (){
                //Second option
        },
        beforeSelectRow: function (rowid, e) {
            var $target = $(e.target);
            if ($target.is(":checkbox")) {
                var canChange = $("#jqgTable").jqGrid('getRowData', rowid).IsEnabled == 'false' ? false : true;
                if ($("#jqgTable").jqGrid('getRowData', rowid).IsEnabled == 'false' ? false : true) {
                    UpdateState(rowid);
                }
                else
                {
                    e.preventDefault();
                }
            }
            return true;
        }
    });
    $('#jqgTable').jqGrid('navGrid', '#jqgTablePager',
    {
       edit: false,
       add: false,
       del: false,
       search: true,
       searchtext: "Search"
    },
    //Edit
    {},
    //Add
    {},
    //Delete
    {},
    //Search
    {
       closeAfterSearch: true,
       closeAfterReset: true,
       closeOnEscape: false,
       searchOnEnter: true,
       multipleSearch: true,
       multipleGroup: false,
       showQuery: false
    }
    ).navButtonAdd('#jqgTablePager', { title: "Title", caption: "Caption", buttonicon: 'ui-icon-wrench', onClickButton: function () { ShowGroup(); }, position: "last" })
    .navButtonAdd('#jqgTablePager', { title: "Delete", caption: "", buttonicon: 'ui-icon-close', onClickButton: function () { CleanGroup(); }, position: "last" });
    $("#jqgTable").trigger("reloadGrid");

谢谢！

更新

我尝试了第二个选项，并在 gridComplete 函数中添加了这个以应用 css 样式 disabled 和 cursor: not-allowed：

var ids = $("#jqgTable").jqGrid('getDataIDs');
         
for (var i = 0; i < ids.length; i++) {
    var id = ids[i];
    var isEditable = $("#jqgTable").jqGrid('getRowData', id).IsEnabled == 'false' ? false : true;
    if (!isEditable)
        $("#jqgTable").jqGrid('setCell', id, 'IsActive', '', 'disabled', {disabled : true});
}

工作正常。

更新

最后我做到了：

我在 ColModel 中保留了复选框的默认格式化程序 我在 gridComplete 函数上添加：

   var IsEnabled = $("#jqgTable").jqGrid('getRowData', id).IsEnabled == 'false' ? false : true;
   var IsActive = $("#jqgTable").jqGrid('getRowData', id).IsActive == 'false' ? false : true;
   if (!IsEnabled)
   {
       $("#jqgTable").jqGrid('setRowData', id, { IsActive: '<input type="checkbox" ' + (IsActive == true ? 'checked="checked"' : '') + ' disabled="disable/>'});
   }

Answer 1

为了解决您的问题，您应该再次定义 unformat 函数

custom formatter.  so if your custom formatter is :

formatter: function (cellvalue, options, rowObject)
           {
                return '<input type="checkbox" value="' + cellvalue + '" ' + (rowObject.IsActive== true ? 'checked="checked"' : '') + ' ' + (rowObject.IsEnabled == false ? 'disabled="disable"' : '') + '/>';
           }

在 colModel 中定义 unformat 如下：

unformat : function(cellvalue, options, cell) {
    return $("input",cell).is(":checked")=== true;              
}

请注意，我们分析的是 cell 而不是 cellvalue。

我们在 Guriddo jqGrid 中对此进行了测试，它按预期工作。

现在使用 getCell 和 getRowData 将根据复选框是否被选中返回 true 或 false