datepickerをクリックしない限り、テーブルの外側をクリックするとjqgridテーブル行が保存されます

Question

私はjqgridテーブルを持っています。 1つの列は、日付ピッカー列です。

このコードは、クリックしたときに表のセルを保存します。

jQuery(document).on('focusout','[role="gridcell"] *', function(){ jqGridTegevused.jqGrid('saveCell', row, col); })

これは、すべて良いです。しかし、このコードはdatepickerの作業を中断します。 datepickerでdateを選択すると、テーブルセルに設定されません。

どうすればいいですか？私がdatepickerをクリックしない限り、セルを保存する前に作業を終わらせるためにdatepicekerが必要なので、私はテーブルセルの外にあるclikをセルに保存します。そして現在、フォーカスはdatepickers onSelectの前に起こります。 DatePicker onSelectで日付を手動で追加しない場合は、セルをフォーカスアウトに保存する必要があります。

Answer 1

イベントのrelatedTargetプロパティを使用して、ユーザーがdatepickerコントロール内をクリックしたかどうかを検出できます。 datepickerの外側divはクラスui-datepickerです。 focusoutがfocusoutに一度だけトリガされます。したがって、あなたのコードは

$(document).on('focusout','[role="gridcell"] *', function (e) { 
    var p = jqGridTegevused.jqGrid("getGridParam"); 

    if ($(e.relatedTarget).closest('.ui-datepicker').length === 0) { 
     // save editing cell only if the current click is not inside of Datepicker 
     jqGridTegevused.jqGrid('saveCell', p.iRow, p.iCol); 
    } 
}); 

次の問題として固定することができます。 0123,のdatepickerのコールバック内にコードを追加して、フォーカスを入力フィールドに強制的に設定して、後でユーザーがグリッドの外側をクリックできるようにする必要があります。* datepickerで日付を選択した後。

$(document).on('focusout','[role="gridcell"] *', ...);の使用法が完全ではないことに感謝します。注意深くテストしてください。 afterEditCellの入力/選択の中のfocusoutのバインドは、$(document).on('focusout','[role="gridcell"] *'として私によく似ています。私は

afterEditCell: function (rowid, nm, tmp, iRow, iCol) { 
    var $grid = $(this); 

    $(this.rows[iRow].cells[iCol]) 
     .find("input,textarea,select,button,object,*[tabindex]") 
     .filter(":input:visible:not(:disabled)") 
     .first() 
     .on("focusout", function (e) { 
      var p = $grid.jqGrid('getGridParam'); 

      if ($(e.relatedTarget).closest('.ui-datepicker').length === 0) { 
       $grid.jqGrid('saveCell', p.iRow, p.iCol); 
      } 
     }); 
} 

を使用し、私は日付ピッカーのonSelectの内部入力要素にフォーカスを設定する追加ここhttps://jsfiddle.net/7oLga5ze/を参照。