2

我有一个三列的 jqGrid。其中一列是为单元格编辑设置的，如下所示：

$('#myGrid').jqGrid({
    ...
    editUrl: 'clientArray',
    cellEdit: true,
    cellsubmit: 'clientArray',
    colModel: [
        {name: 'Col1'},
        {name: 'Col2'},
        {
             name: 'Col3',
             editable: true,
             editrules: {required: true, number: true}
         }
    ]
});

当用户单击第三列中的单元格时，编辑器会自动出现。但是，当用户单击某一行时，该行也会突出显示（“选中”）。如果用户单击可编辑列中的单元格，是否可以禁用此突出显示同时仍允许显示单元格编辑器？

我试过了

$('#myGrid').jqGrid({
    ...
    beforeSelectRow: function() { return false; }
})

...但这会禁用编辑以及选择行。

4

1 回答 1

1

您没有发布任何代码来显示您如何实现内联编辑。有许多不同的实现使用内联编辑。最典型的是

  • 在行选择上开始编辑，按 保存Enter，在丢弃先前未保存行中的更改后选择另一行
  • 在行选择上开始编辑，按 保存Enter，选择另一行后静默保存上一个未保存行中的更改
  • 双击行开始编辑，按 保存Enter，选择另一行后丢弃先前未保存行中的更改
  • 双击行开始编辑，按 保存Enter，选择另一行后静默保存上一个未保存行中的更改
  • 使用附加列formatter: "actions"
  • inlineNav方法的使用
  • ...

例如，如果您使用上述列表的第一个版本并且您不想进行任何行选择，则可以将代码从onSelectRow移动到beforeSelectRow.

该演示演示了一个可能的实现：

beforeSelectRow: function (rowid) {
    var $this = $(this),
        editingRowId = $this.jqGrid("getGridParam", "editingRowId"),
        setEditingRowId = function (newId) {
            $this.jqGrid("setGridParam", {editingRowId: newId});
        };

    if (rowid !== editingRowId) {
        if (editingRowId !== undefined) {
            $this.jqGrid("restoreRow", editingRowId);
        }
        $this.jqGrid("editRow", rowid, {
            keys: true,
            oneditfunc: function (id) {
                setEditingRowId(id);
            },
            aftersavefunc: function () {
                setEditingRowId();
            },
            afterrestorefunc: function () {
                setEditingRowId();
            }
        });
    }

    return false;
}

更新：如果您想使用单元格编辑模式，相应的实现会更加困难。不过，您可能应该主要遵循答案中的想法。该演示演示了您需要的部分代码。它不使用任何键盘绑定。

beforeSelectRow: function (rowid, e) {
    var $this = $(this),
        $td = $(e.target).closest("td"),
        $tr = $td.closest("tr.jqgrow"),
        iRow, iCol;

    if ($tr.length > 0) {
        iRow = $tr[0].rowIndex;
        iCol = $.jgrid.getCellIndex($td[0]);
        $this.jqGrid('setGridParam', {cellEdit: true});
        $this.jqGrid('editCell', iRow, iCol, true);
        $this.jqGrid('setGridParam', {cellEdit: false});
    }

    return false;
}
于 2012-11-21T16:33:38.263 回答