单击时停止“选择”jqGrid行，同时仍保留编辑答案

【问题标题】：Stop jqGrid row being 'selected' when clicked, while still preserving editing单击时停止“选择”jqGrid行，同时仍保留编辑
【发布时间】：2012-11-21 15:13:53
【问题描述】：

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

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

【问题讨论】：

标签： jquery jqgrid

【解决方案1】：

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

在行选择时开始编辑，按 Enter 保存，在丢弃先前未保存行中的更改后选择另一行
在行选择时开始编辑，按 Enter 保存，在静默保存前一个未保存行中的更改后选择另一行
双击行开始编辑，按Enter保存，选择另一行后丢弃先前未保存行中的更改
双击行开始编辑，按Enter保存，选择另一行后静默保存前一个未保存行的更改
使用具有formatter: "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;
}

UPDATED：如果要使用单元格编辑模式，相应的实现会比较困难。不过，您可能应该主要遵循the answer 的想法。 The demo 演示您需要的部分代码。它不使用任何键盘绑定。

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

【讨论】：

抱歉，如果我不够清楚。我有大约三列，但其中只有一列是可编辑的。我将更新问题以反映这一点。
@Lorax：您编写了“内联编辑”，但您的代码显示您使用的是cellEdit: true。它是单元格编辑。 jqGrid 支持三个editing modes。所有的作品都完全以另一种方式。如果您使用单元格编辑，那么您现在会问绝对新的问题。可以实现您需要的行为，但您必须删除cellEdit: true 并在beforeSelectRow 回调中手动调用editCell。我希望the answer 的代码能帮助你实现这一点。
感谢您澄清我对行话的误解。我才刚刚开始使用 jqGrid，有时发现文档很难导航。我将删除对“内联编辑”的引用。有没有什么方法可以手动调用editCell只有当用户点击行中的那个单元格？
Oleg，您的解决方案很棒，但是我看到了一个问题，因为“输入”或“转义”不允许我们从输出中退出。你有解决办法吗？
@user2360915：对不起，答案真的很老了。我从 2014 年底开始开发free jqGrid fork。我对代码做了很多小改动，修复了很多错误并实现了许多新功能。免费jqGrid中单元格编辑的默认行为：不选择单元格编辑的行。如果确实需要，则可以通过在beforeEditCell 回调中调用setSelection 来完成此操作。换句话说，如果您使用here 描述的 URL，则无需执行任何操作。