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 保存，选择另一行，然后保存以前未保存行中的更改
使用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;
}

更新：如果要使用单元格编辑模式，相应的实现会更加困难。然而，您可能应该主要关注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;
}

单击时停止jqGrid行被“选中”，同时仍然保留编辑

1 个答案: