jqGridのすべてのページに対してeditGridRowメソッドを有効にする

Question

問題は、現在のPageの10個のレコードを持つリンクをクリックすると編集ダイアログが表示されることです。しかし、2番目のページに移動すると、ダイアログ。

colModel:{ name: "FirstName", index: "FirstName", width: 100, sortable: true, editable: true, formatter: GetRow, unformat: GetCellValue }, 

    function GetRow(cellvalue, options, rowObject) { 
     return "<a href='#' class='GetLink'>" + cellvalue + "</a>"; 
    } 

$('.GetLink').click(function() { 
    var row = $('#grid').jqGrid('getGridParam', 'selrow'); 
    if (row) { 
     $('#grid').jqGrid('editGridRow', row, { recreateForm: true, closeAfterEdit: true, closeOnEscape: true, reloadAfterSubmit: false,}); 
    } 
    else { 
     alert("Select the row you want to edit"); 
    } 
}); 

Answer 1

あなたの前の質問にmy answerを再読み込みしてください事前に 感謝を助けてください。 $('.GetLink').clickは現在にリンクを登録していますので、使用しないでください。a.GetLinkです。正確には$('.GetLink')で、既存の要素を検索します。クラスはGetLinkで、DOM要素の配列をjQueryラッパーとして返します。 .clickによって、すべての要素に別々のクリックハンドルを登録します。ユーザーが2番目のページに移動したり、列を並べ替えたり、その他多くの操作を行うと、グリッド本体はになり、に再作成されます。以前に作成されたすべてのa.GetLinkの要素が削除され、新しいa.GetLinkの新しいの行（<tr>要素）がグリッド本体に挿入されます。要素には原因のイベントハンドラがありません。あなたはloadCompleteコールバック内で$('.GetLink').clickを移動することで問題を解決できますが、代わりにbeforeSelectRowを使用することをお勧めします。

あなたはすでにbeforeSelectRowについて書いています。私はここでそれがどのように動作するかをより詳細に説明します。 HTMLページのすべての要素は、onclickのようなメソッドを含むDOMインターフェイスをサポートしています。イベント処理（イベントフロー）がのイベントバブリングをサポートしていることを理解することは重要です。これは、ドキュメントまでの親要素で上向きの伝播が継続することを意味します（here参照）。イベントハンドラは、EventインターフェイスのstopPropagationメソッドを呼び出して、それ以上のイベントの伝播を防ぐことができます。

したがって、ユーザーがテーブルセルの内部要素をクリックすると、clickイベントハンドラは、要素にバインドされるだけでなく、親オブジェクトにバインドされるイベントハンドラにも呼び出されます。あなたはtable#grid上のグリッドを持っているなら、あなたは、使用

jQuery("#grid").click(function (e) { 
    // e.target represent the DOM element INSIDE of the table 
    // which was clicked 
}); 

とイベントハンドラによってグリッド全体のハンドラをクリックして登録することができます（<span class="myLink">some text</span>上の例）グリッドのいずれかの内部要素をクリックで呼び出されます。 e.targetは、クリックされた要素に関する完全な情報を提供します。 var $td = $(e.target).closest("td")以上を使用してvar $td = $(e.target).closest("tr.jqgrow>td")をグリッドのセルまでDOM階層の上に移動することができます。返される値は、DOM要素へのjQueryラッパーで、<td>要素を表します。 $の対応するJavaSvript変数の名前を読み込み、コードを読みやすくし、jQueryラッパーであることを強調します。したがって、$td[0]はDOM要素になります。すべてtd DOMエレメントはcellIndexプロパティをサポートします（hereおよびhereを参照）。したがって、$td[0].cellIndexはクリックされた列のインデックスで、colModel[$td[0].cellIndex].nameはクリックされた列の名前です（ここではvar colModel = $(this).jqGrid("getGridParam", "colModel")）。 rowid（行の属性idの値が<tr>の値）を取得する必要がある場合は、$td.closest("tr.jqgrow").attr("id")を使用できます。

jqGridの既存のコードを追加clickハンドラを登録する必要はありません

... 
var ts = this; // the DOM of the grid 
... 
$(ts).click(function (e) { 
    ... 
    var rowid = $(e.target)("tr.jqgrow").attr("id"); 
    ... 
    if ($.isFunction(p.beforeSelectRow)) { 
     var isAllowSelection = p.beforeSelectRow.call(ts, rowid, e); 
     if (isAllowSelection) { 
      ... 
     } 
    } 

}) 

したがって1のようなコードが含まれています。代わりにbeforeSelectRowコールバックを使用できます。 1つは、行の選択を可能にするためにtrueを返すことを忘れないでください。

デモhttps://jsfiddle.net/wugfty1o/3/は、beforeSelectRowの使用方法を示しています。