有沒有辦法禁用 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 <input type="checkbox" value="true" checked="checked"> ，但使用$($('#jqgTable').jqGrid('getCell', "idSelected", 'IsActive')).is(':checked') 。

在我使用formatter: "checkbox"和$('#jqgTable').jqGrid('getCell', id, 'IsActive'); 我得到Yes或No ，所以我可以做我需要的，但所有復選框都是啟用的。

我也嘗試了其他解決方案

我與formatter: "checkbox"和 function

    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 function 中添加，以應用 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 function 上添加：

   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 function

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

請注意，我們分析的是單元格而不是單元格值。

我們在 Guriddo jqGrid 中對此進行了測試，它按預期工作。

現在使用 getCell 和 getRowData 將根據復選框是否被選中返回 true 或 false