2

3 つの列を持つ jqGrid があります。次のように、列の 1 つがセル編集用に設定されています。

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

ユーザーが 3 列目のセルをクリックすると、エディターが自動的に表示されます。ただし、ユーザーが行をクリックすると、その行も強調表示 (「選択」) されます。ユーザーが編集可能な列のセルをクリックした場合にセル エディターを表示できるようにしながら、この強調表示を無効にすることはできますか?

私はもう試した

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

...しかし、これにより行の選択だけでなく編集も無効になります。

4

1 に答える 1

1

インライン編集をどのように実装したかを示すコードは投稿していません。インライン編集を使用する多くの異なる実装があります。最も典型的なものは

  • 行選択で編集を開始し、を押して保存します。Enter別の行を選択すると、前の保存されていない行の変更が破棄されます。
  • 行選択で編集を開始し、を押して保存します。Enter別の行を選択すると、前の保存されていない行の変更がサイレントに保存されます。
  • 行をダブルクリックして編集を開始し、を押して保存します。Enter別の行を選択すると、前の保存されていない行の変更が破棄されます。
  • 行をダブルクリックして編集を開始し、を押して保存します。Enter別の行を選択すると、前の保存されていない行の変更がサイレントに保存されます。
  • 追加の列の使用法formatter: "actions"
  • inlineNavメソッドの使用
  • ..。

たとえば、上記のリストの最初のバージョンを使用していて、行を選択したくない場合は、コードをonSelectRowからに移動できますbeforeSelectRow。

デモは、可能な実装の1つを示しています。

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 に答える