在 jqGrid 中切换单元格只读/可编辑

Question

I have I case where I want to toggle a cell to readonly / editable, depending on some condition. It almost works, I can make it readonly, but not editable again.

grid.setColProp("a", {
    editoptions: {
        value: data.opPadrag,
        dataEvents: [{
            type: 'change',
            fn: function (e) {
                var selr = grid.jqGrid('getGridParam', 'selrow');
                if (someCondition) grid.jqGrid('setCell', selr, 'c', '', 'not-editable-cell');
                else
                // Problem here - how to make it editable. I've tried a few ways, none worked
                // grid.jqGrid('setCell', selr, 'c', '', 'editable-cell');
                // grid.jqGrid('setCell', selr, 'c', '', 'editable');
                // grid.jqGrid('setCell', selr, 'c', '', '');
            }
        }]
    }
});

Any ideas?

Answer 1

There is no built in function for removing class from cell, you can do this manually like this:

grid.setColProp('a', { editoptions: { value: data.opPadrag, dataEvents: [{ type: 'change', fn: function (e) {
    var selr = grid.jqGrid('getGridParam', 'selrow');
    if (someCondition) {
        grid.jqGrid('setCell', selr, 'c', '', 'not-editable-cell');
    } else {
        var colModel = grid.jqGrid('getGridParam', 'colModel');
        for (var iCol = 0; iCol < colModel.length; iCol++) {
            if (colModel[iCol].name === 'c') {
                var row = grid[0].rows.namedItem(selr);
                var cell = row.cells[iCol];
                $(cell).removeClass('not-editable-cell');
                break;             
            }
        }
    }
} }] } }); 

Answer 2

You can perform this action in more efficiency.

Using jquery one line of code:

 $("#<GridId> tr[id='<RowId>'] td[aria-describedby='<GridId>_<ColumnName>']").removeClass('not-editable-cell');

Example:

$("#maingrid tr[id='1'] td[aria-describedby='maingrid_column1']").removeClass('not-editable-cell');

thanks,

Gavriel