jquery - 单击时停止 jqGrid 行为 'selected'，同时仍保留编辑

Question

我有一个包含三列的 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; }
})

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

Answer 1

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

• 在行选择上开始编辑，按Enter保存，选择另一行后会放弃先前未保存的行中的更改
• 在行选择上开始编辑，按Enter保存，选择另一行后静默保存先前未保存的行中的更改
• 双击该行开始编辑，按Enter保存，选择另一行后会放弃先前未保存的行中的更改
• 双击该行开始编辑，按Enter保存，选择另一行后静默保存先前未保存的行中的更改
• 使用具有格式化程序的附加列:“actions”
• 使用 inlineNav方法
• ...

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

The demo演示可能的实现之一:

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;
}

更新:如果要使用单元格编辑模式，相应的实现会更加困难。尽管如此，您可能应该主要遵循 the answer 中的想法。 。 The demo演示您需要的代码部分。它不使用任何键盘绑定(bind)。

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;
}