jqgrid "tab"キーで行を編集して追加します

Question

私はjqgridを新しく使いました。 "tab"キーでグリッド内を移動しようとしています。 私は行を編集できるようにしたい、そしてその行の最後のセルを編集しているときに、タブキーをクリックすると現在の行の変更が保存されます（クライアント側ではenterをクリックしません）。フォーカスを次の行に設定してセルを編集し、最後の行とセルに移動すると、タブをクリックすると新しい行が追加され、編集モードになります。

私はライン編集で試してからセル編集してみましたが、いつも邪魔になりました... これはどうやってできますか？

ありがとうございます。

Answer 1

現在の内容はわかりませんが、これをテストして動作します。最初にグリッドの編集を開始する方法について言及しなかったので、準備完了イベントで手動で行ったので、selIRow varを使用して現在編集中の行を追跡するだけで済みます。

var selIRow = 1; //keep track of currently edited row 
       //initialized to 1 for testing purposes 

    $(document).ready(function() { 
     $("#jqGrid").jqGrid({ 
      datatype: 'local', 
      colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'], 
      colModel: [ 
       { name: 'id', index: 'id', width: 60, editable: true }, 
       { name: 'invdate', index: 'invdate', width: 90, editable: true }, 
       { name: 'name', index: 'name', width: 100, editable: true }, 
       { name: 'amount', index: 'amount', width: 80, editable: true }, 
       { name: 'tax', index: 'tax', width: 80, editable: true }, 
       { name: 'total', index: 'total', width: 80, editable: true }, 
       { name: 'note', index: 'note', width: 150, editable: true, 
        //Place this code in the col options of the last column in your grid 
        // it listens for the tab button being pressed 
        editoptions: { 
         dataInit: function (elem) { $(elem).focus(function() { this.select(); }) }, 
         dataEvents: [ 
          { 
           type: 'keydown', 
           fn: function (e) { 
            var key = e.charCode || e.keyCode; 
            if (key == 9)//tab 
            { 
             var grid = $('#jqGrid'); 
             //Save editing for current row 
             grid.jqGrid('saveRow', selIRow, false, 'clientArray'); 
             //If at bottom of grid, create new row 
             if (selIRow++ == grid.getDataIDs().length) { 
              grid.addRowData(selIRow, {}); 
             } 
             //Enter edit row for next row in grid 
             grid.jqGrid('editRow', selIRow, false, 'clientArray'); 
            } 
           } 
          } 
         ] 
        } 
       } 
      ], 
     }); 
    }); 

タブイベントでは、kajoの回答にはhereが表示されます。