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

Posted 2023-05-07

【中文标题】有没有办法在 jqgrid 中禁用复选框？

【英文标题】：Is there a way to disable checkbox in jqgrid?

【发布时间】：2020-10-28 09:06:11

【问题描述】：

我正在尝试禁用 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/>');
   

【问题讨论】：

如果您 IsActive 是一个复选框（它是表格单元格的第一个子项），我不确定您使用 setCell 的更新代码是否能正常工作

是的，这是个问题，但在 css 中，我使用输入选择器 ".disabled input[type="checkbox"]" 来应用 css

【参考方案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

【讨论】：

你把 unformat 函数放在哪里了？它应该正好在您定义复选框值的 colModel 中的格式化程序之后。另一个问题可能是使用的 jqGrid 版本？使用哪个版本的 jqGrid？查看此文档以了解如何使用 unformat function

我把该字段的 colModel 中的格式化程序完全放在后面。版本是 jqGrid 4.8.0 - 免费的 jqGrid。谢谢，我会检查的。