Question

如何在不可编辑的列中编辑单个单元格？我的javaScript看起来像这样：

$( '#grid' ).jqGrid({
    // ...
    cellEdit : true,
    colModel : [
        { name : "id", index : "id", editable : false },
        { name : "wbs", index : "wbs", editable : false },
        { name : "value", index : "value", editable : false }
    ],
    loadComplete : function(data) {
        // ... foreach ( cell in data.rows.columns ) ...
        if ( cell.shouldBeEditable ) {
            jQuery('#grid').setCell(cell.row, cell.col, '', 'green', { editable : true });
        }
    }
    // ...
}

所以，在全局设置列不可编辑之后，我尝试根据某些条件将它们设置为可编辑的本地（为了更容易识别它们，我也将它们绘制为绿色）。

唉，它不起作用：细胞变成绿色，但当我尝试点击它们时它们不会变得可编辑。
使用firebug检查选定的单元格会显示edit-cell类正确应用作为最后一点，如果我在第一个实例中将列设置为可编辑，则它可以正常工作。

Answer 1

我建议你反向做。使列可编辑，但禁用您不想编辑的单元格。这是我写的一个禁用单元格的函数：

// cellName is the name defined in your colModel
function disableGridCell(cellName) {
    var cell = $('[name="' + cellName + '"]');
    cell.css('display', 'none');

    var div = $("<div>")
        .css('width', '100%')
        .css('height', '100%')
        .css('border', '1px solid #000')
        .css('background-color', '#CCC')
        .text('xxxxxxxxxxxx');

    cell.parent().append(div);
}

我在网格的 editRow 函数的 onEditFunc 中调用 disableGridCell ：

$('#grid').jqGrid('editRow', id, keys, onEditFunc);

function onEditFunc(id) {
   if (condition to disable cell) {
      disableGridCell('CellName');
   }
}

Answer 2

我找到了一个很好的解决方法（感谢Walter让我走上正轨）。

我没有锁定所有单元格并以声明方式选择性地解锁它们（这可能会导致加载时间过长），而是将所有单元格声明为可编辑。
然后我将回调附加到afterEditCell选项：

var $grid = $('#grid');
$grid.jqGrid({
    // ...
    afterEditCell : function(rowid, cellname, value, iRow, iCol) {
        if ( shouldNotBeEditable(iRow, iCol) ) {
            $grid.setCell(rowid, cellname, '', 'not-editable-cell');
            $grid.restoreCell(iRow, iCol);
        }
    },
    // ...
});

这样，单元格会立即重置为之前的值，并且我确保每个不被编辑的单元格只调用一次回调，因为在第一次调用后单元格被设为not-editable-cell

jqGrid：是否有可能选择性地使细胞可编辑？

2 个答案: