jqGrid:是否可以选择性地使单元格可编辑

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。

Answer 3

colModel:[
{name:'description',index:'description', width:4, sortable: false, editable: true},
{name:'qty',index:'qty', width:1,sortable: false, editable: true},
{name:'cost',index:'cost', width:1, editable: true, sortable: false},
{name:'totalCost',index:'totalCost', width:1, sortable: false}

onCellSelect: function(rowid, iCol, cellcontent, e) {
//here it will allow editing of either qty or cost col for that rowid 
//only if both cols have a numeric value already    
   if(iCol===1 || iCol===2) {
      var rowdata = $("#projectTable").getRowData(rowid);
      var itemCost = parseInt(rowdata['cost']);
      var qty = parseInt(rowdata['qty']);
      if(!$.isNumeric(itemCost) || !$.isNumeric(qty)) {
         $("#projectTable").jqGrid('setColProp','qty',{editable: false});
         $("#projectTable").jqGrid('setColProp','cost',{editable: false});
      } else {
         $("#projectTable").jqGrid('setColProp','qty',{editable: true});
        $("#projectTable").jqGrid('setColProp','cost',{editable: true});
      }
    }
},