jqGrid：行全体をインライン編集するが、編集モードに入るためにクリックされたセルにフォーカスする

Question

Webアプリケーションはデータ入力にjqGridを使用し、データはインラインおよびローで編集されます。

お客様は、セルをクリックして行をインライン編集に切り替えると、そのセルがフォーカスを受け取ります（現在、行の最初のセルがフォーカスを取得します）。

Answer 1

グリッドは、行の最初の編集可能なフィールドにのみフォーカスを設定できます。これはソースコードgrid.inlinedit.jsで確認できます。ここでは、最初のものを、それらを反復し、求めることにより、フォーカスを設定する行のインデックスを数値：

if(cm[i].editable===true) { 
    if(focus===null) { focus = i; } 

、後でその上を設定フォーカス：ある要素を選択

$("td:eq("+focus+") input",ind).focus(); 

変数はfocus変数に格納されています（参考のため:eq selectorを参照）。あなたがそう傾斜している場合は、フォーカスを受け取る要素を制御するために、独自のカスタム・ロジックを追加するために、コードのこのセクションを編集することができ、言っ

...

Answer 2

私はjqGridはの直接サポートを持っていないことをジャスティンに同意しますあなたが必要とする行動。あなたが受け取ることができる方法は、jqGridのほんの一例として、より複雑にすることができます。 the codeをthe answerからご覧ください。それがあなたを助けることを願っています。

Answer 3

これはjqGridの重大な欠陥です。 グリッドがウィンドウより広い場合は、右にスクロールしてクリックしたセルを表示する必要があります。このためには、私は同じ問題に遭遇した http://www.trirand.com/blog/?page_id=393/help/inline-edit-problem-with-scrolling/

 if (rowID && rowID !== lastSelectedRow) { 
      var scrollPosition = 0; 
      scrollPosition = grid2.closest(".ui-jqgrid-bdiv").scrollLeft(); 
      grid2.jqGrid('restoreRow', lastSelectedRow); 
      grid.jqGrid('editRow', rowID, true); 
      lastSelectedRow = rowID; 
      setTimeout(function(){ 
       grid2.closest(".ui-jqgrid-bdiv").scrollLeft(scrollPosition); 
       },100); 

Answer 4

からコードを使用することができます。非常にイライラ。 jquery.jqGrid.jsファイルを変更して、クリックされたセルのフォーカスを設定できるようにしました。

function editRow(id, row, col, z) 
{ 
    grid.jqGrid("editRow", id, true, function() 
    { 
     var f = $("input, select", z.target).focus(); 

     return f; 
    }); 
} 

これは最終的に問題がある$ .jgrid.extend

に「oneditfunc」に渡される変数fを作成します。私のeditRow機能で

は、私は、次のコードを追加しましたsetTimeout関数で呼び出されます。このよう

$("td:eq("+focus+") input",ind).focus(); 

は、上記.each関数から最初の編集可能なフィールドに設定し、フォーカスして実行されます。これはフォーカス指標を渡すのには最適な場所ですが、可能ではありません。

// End compatible 
return this.each(function() 
{ 
    var $t = this, nm, tmp, editable, cnt = 0, focus = null, svr = {}, ind, cm, bfer; 
... 

次に、次のコードを追加しました。 （>>>持つ行が変更されていません。それはあなたがコード内に挿入ポイントを見つけることしかない。）

>>>  $($t).triggerHandler("jqGridInlineEditRow", [rowid, o]); 


    if ($.isFunction(o.oneditfunc)) 
    { 
     // modified to allow for setting focus on the 
     // field clicked on 

     // sets a return value. this was added to the original code. if using 
     // legacy code, should see no change as r will be undefined 
     var r = o.oneditfunc.call($t, rowid); 

     // if get a return value, this indicates you want to set focus 
     if (r && r[0]) 
     { 
      var focusIndex = focus; 
      var i = 0; 

      // look for the field name that was clicked on 
      // cm, which is built above, has no index value associated 
      // with it, so we must keep track of 
      var focusField = $.grep(cm, function(c) 
      { 
       // find the field name which was clicked on 
       if (c.name == r[0].name) 
        focusIndex = i; 

       i++; 

       return c.name == r[0].name; 
      }); 

      // if the field is editable, then update focus index 
      // which is defined above 
      if (focusField[0].editable) 
      { 
       focus = focusIndex; 
      } 
     } 
    } 

最もエレガントな解決策？おそらくそうではありませんが、すべてのレガシーコードが動作するようになりました。どのフィールドをクリックしてフォーカスを設定できるのかを把握することができます。

Answer 5

私は、Justin EthierとSteveの答えをjqGrid 4.4。3）：私は作成し、次に

// commented out 
// $("td:eq("+focus+") input",ind).focus(); 

：jqGridのソースで

、私は、次の行（これは）、フォーカスを受信するように編集された行の最初の入力を防止するためであるがコメントアウトグリッドのクリック元を保持するグローバル変数です。

var clickedCell; 

最後に、変数をセルをクリックすると設定します。

$('#myJqGrid td').on('click', function(e){ clickedCell = this; }); 

表のセルにイベントを添付できるようにするために、しかし、我々はグリッドが作成されていることを確認する必要があり、それはjqGridの「gridComplete」機能で行う必要があり、例えば：行を編集するとき

$('#myJqGrid').jqGrid('setGridParam', { 
    gridComplete: function(id){ 
         $('#myJqGrid td').on('click', function(e){ clickedCell = this; }); 
        } 
}); 

そして最後に、私は、クリックされたセル（変数に保存されている「clickedCell」）を取得し、その内部の入力またはテキストエリアにフォーカスを与えます。これはjqGridの「onSelectRow」機能で行う必要があります。

$('#myJqGrid').jqGrid('setGridParam', 
          { 
          onSelectRow : function(id) { 
           ... 
           //switching the selected row to editmode 
           $('#myJqGrid').jqGrid(
            'editRow', 
            id, 
            { 
             keys: true, 
             // when editing the row, give the focus to the input 
             //or textarea within the last clicked cell 
             oneditfunc: function() { 
              $('input, textarea', clickedCell).focus(); 
            } 
           ); 
           ... 
          } 
          } 
         }); 

唯一の問題は、実際にそこにあるjqGridの少しでもソースコードに触れることなく解決策ではありません。そうしないと、それでも機能しますが、最初の入力は最初にフォーカスを取得し、正しいフォーカスが割り当てられた後でも、ページの水平スクロールを移動します。

Answer 6

私はこの回答を別のstackoverflow関連の質問に掲載しました。これがあなたにも当てはまると思っています。

dblclickイベントをテーブルのすべてのtdに付けることで、何とかこれを達成することができました。私はこれが最良の方法ではないことを知っていますが、自由に最適化することができます。テストのためにのみ使用されます。

$("#jqGrid").on("dblclick", "td", function (event) { 
       // setTimeout(function() { 
         console.log(this); 
         $(event.target).find("input,select").focus();      
        // }, 0); 
       }); 

希望すると、これが役立ちます。