現在、インライン編集を使用して編集を行っていますが、グリッドの外側をクリックしても、まだ編集中です。データが実際にサーバーに送信される唯一の方法は、ユーザーがEnterキーを押した場合であるように、行の復元関数を呼び出すためにどのイベントハンドラーを使用する必要がありますか。
事前にthx
現在、インライン編集を使用して編集を行っていますが、グリッドの外側をクリックしても、まだ編集中です。データが実際にサーバーに送信される唯一の方法は、ユーザーがEnterキーを押した場合であるように、行の復元関数を呼び出すためにどのイベントハンドラーを使用する必要がありますか。
事前にthx
インライン版をどのようにトリガーしているのか正確にはわかりません。私は jqGrid のイベントを使用し、ユーザーがor ( edit ) 要素ondblClickRow
を離れたときに行を復元する方法も探していました。input
select
最後に選択した要素を追跡し、他の要素をクリックするたびにチェックするのは面倒です。restoreRow
したがって、より便利な方法は、トリガーを現在編集中のor要素のblur
イベントにアタッチすることだと思います。input
select
ondblClickRow: function(rowid, iRow, iCol, e) {
grid.jqGrid('editRow', rowid, true);
$("input, select", e.target).focus().blur(function() {
grid.jqGrid('restoreRow', rowid);
});
return;
}
このようにして、ユーザーが Enter キーを押さずに編集フィールドを離れるたびに、行が復元されます。
このアプローチは私にとってはうまくいきます。他の人にも役立つことを願っています。
とにかく、私はすでにそれを行う方法を考え出しました。方法を考え出すのにかなりの時間を無駄にしたので、オンラインのどこかに置いておくのが良いかもしれないと思っただけです. それが役立つことを願っています=)
$(document).click(function(e){
if(e.target.id != lastSelectRoot+"_FieldName"){
jQuery('#grid').jqGrid('restoreRow',lastSelectRoot);
lastSelectRoot = null;
}
});
このコードをどこかに追加し、FieldName や lastSelectRoot、#grid などの適切な部分を既に使用しているものに変更するだけです。
このソリューションは私にとっては機能しており、他のオプションよりもシンプルに見えます。汎用的で、グローバル変数は必要ありません。
$(document).on('focusout', '[role="gridcell"] *', function() {
$("#mygrid").jqGrid('editCell', 0, 0, false);
});
$(document).on('click') に基づくソリューションには潜在的な欠陥があります。select2 のような一部のコンポーネントは、クリック イベントをドキュメントに伝達しないため、ページ上にあるコンポーネントがクリックされた場合 (私の場合) は失敗します。
インライン編集で作業しているときに同じ問題に直面しました.回避策を講じました.それが正しい解決策であるかどうかはまだわかりません.
行を編集していたとき、この種のものを使用しました
var lastSel;
// In grid I am using some thing like this for editing
ondblClickRow: function(rowId, iRow, iCol, e){
//initially I am saving my prev row selected for editing and then editing the selected row.
if(rowId && rowId!==lastSel){ //lastSel is a global variable
jQuery(this).saveRow(lastSel);
lastSel=rowId;
}
$(this).jqGrid('resetSelection');
$(this).jqGrid('editRow', rowId, true, null, null, 'clientArray');
}
データをサーバーに送信して更新したいときは、最初の行で次のステートメントを使用し、データを送信してからサーバーに送信しています。
$(gridId).saveRow(lastSel);//where lastSel is the global variable I have selected.
これにより、問題を解決する方法がわかることを願っています。ところで、いつでも編集できる行を1つだけ作成しました。
私はいくつかの異なるバリエーションを試しました。Mauricio Reis のコードに基づいて、自分で書きました。
var lastSel = -1;
$("#mygrid").jqGrid({
...
beforeSelectRow: function(rowid) {
if (rowid !== lastSel) {
lastSel = rowid;
$("#mygrid").jqGrid('restoreRow',lastSel); // cancel edit
}
return true;
},
onCellSelect: function(rowId,iCol,cellcontent,e) {
if(iCol == 1 || iCol == 2) // editable columns
sgrid.jqGrid('editRow', rowId, true);
},
...
});
...
$(document).click(function(e) {
if(sgrid.has(e.target).size() < 1)
$("#mygrid").jqGrid('restoreRow',lastSel); // cancel edit
});
代わりに行を保存したい場合は、編集をキャンセルしてください
$("#mygrid").jqGrid('saveRow', lastSel); // save row
代わりは
$("#mygrid").jqGrid('restoreRow',lastSel); // cancel edit