1

セル編集を使用するようにjqGridを設定し、ナビゲーション用にいくつかのキーをバインドしました。

上下の矢印は前または次の行の編集行を呼び出し、それはうまく機能します。唯一の問題は、表示されているレコードの最後に到達した場合、それが追いつくためにスクロールしないことです。

グリッドオプションで設定しようとしましscrollrows: trueたが、セルではなく、行全体を選択する場合にのみ機能するようです。

誰かが前にこれに対処する必要がありますか？私はスクロールとjavascript/jqueryの経験があまりないので、これに対するすぐに使えるソリューションはありません。

提案をありがとう！

編集：これはデバッグに役立つフィドルです。問題を確認するには、[Thingy]列をクリックし、下矢印を使用して移動します。

4

2 に答える 2

1

editNewCell関数を変更してsetSelection、新しく編集された行が表示されるようにすることができます。

function editNewCell(iRow, iCol) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    grid.editCell(iRow, iCol, true);

    var selRow = grid.getGridParam('selrow');
    grid.jqGrid('setSelection', selRow );
};

試してみたい場合は、変更を加えたjsfiddleを次に示します。

于 2012-05-22T20:21:14.423 に答える
0

正しく理解できたかどうかはわかりません。「表示されているレコードの最後に到達すると、スクロールして追いつかない」とはどういう意味ですか？一番上/一番下の行に到達すると、それ以上進むことができないということですか、それとも、水平方向にスクロールし続け、表示されているレコードの終わりを超えると、編集モードがなくなるということですか。

私は、セル編集のために編集モードで上下の矢印ナビゲーションを使用するgridedit実装のような同様のExcelを持っています。最初の段落のリンクをクリックすると、jsfiddleサンプルに移動します。javascriptセクションで、HandleInputNavigation関数を探します。列のeditoptionsの下にあるcolModelのkeydownイベントをHandleInputNavigation関数に関連付けました。それは私が上下のナビゲーションを扱うところです。

5/24更新：コードは次のようになります。

    if (iRow && iCol) {
    var isShift = window.event.shiftKey ? true : false;
    var top = 1; //UPDATED
    var bottom = grid.getGridParam('reccount');
    var left = 0;
    var right = grid.getGridParam("colNames").length - 1;

    switch (key) {

    case 38:
            // up
        if (iRow === top) saveCell(iRow, iCol); //UPDATED
        else editNewCell(iRow - 1, iCol);
        break;

    case 40:
            // down
        if (iRow === bottom) saveCell(iRow, iCol); //UPDATED
        else editNewCell(iRow + 1, iCol);
        break;
    ...
    ...

更新されたフィドル

于 2012-05-17T16:36:26.757 に答える