jqGrid、モーダルフォーム経由でグリッド内の任意の位置に行を追加するにはどうすればよいですか？

Question

これを行う方法はありますか？ jqGrid form editing featureを使用してグリッドにデータを設定します。しかし、jqGridでは、グリッド内の上部または下部の位置に行を追加することのみが許可されています。私がしたいのは、（既存の行をクリックして）グリッド上の希望の位置を選択してから、その行の上または下に行を追加することです。

私の貧しい私の英語のために申し訳ありません。前もって感謝します。

Answer 1

あなたが必要とするものは可能であり、それほど複雑ではありません。非常にold demoをthe answerから見てください。 name: 'myColName'の列があり、の後に編集または追加のフォームに情報を挿入する場合は、その列の情報を挿入するだけです。フォームには<table>が含まれています。したがって、1つまたは2つの子<td>要素（ラベルのセルとデータのセル）を持つ<tr>を挿入する必要があります。フォームの他のデータと一致させるには、<tr>要素にclass="FormData"を使用する必要があります。 、OK：（ラベルの列の）最初の<td>要素はclass="CaptionTD ui-widget-content"を有するべきであり、（変更の入力のためのデータの欄に）第二<td>要素べきはclass="DataTD ui-widget-content"を有する：

を更新し

{ // edit options 
    recreateForm: true, 
    beforeShowForm: function ($form) { 
     var $formRow = $form.find('#tr_Name'); // 'Name' in the column name 
         // after which you want insert the information 
     $('<tr class="FormData"><td class="CaptionTD ui-widget-content">' + 
      '<b>Label:</b>' + // in the line can be any custom HTML code 
      '</td><td class="DataTD ui-widget-content">' + 
      '<span></span>' + // in the line can be any custom HTML code 
      '</td></tr>').insertAfter($formRow); 
    } 
} 

今私はあなたが望むものを理解しています。問題は、addedrowがeditGridRowのオプションで新しい行を追加するためにaddRowDataが呼び出されることです。したがって、reloadAfterSubmit: falseオプションを使用する場合は、新しい行を'first'またはグリッドの'last'として追加できます。 'after'または'before'のパラメータをaddRowDataにするには、新しい行が挿入される前の行のIDを指定する1つ以上のパラメータでメソッドaddRowDataを呼び出す必要があります。

jqGridのソースコードを変更した場合にのみ、要件を実装できるように見えます。実際には、jqGridのソースコードを変更することなく、非常に小さなコードとで要件を実装することができます。

あなたは変数にaddRowDataの元の実装へのポインタを保存して実装して それを上書きすることができます：

var oldAddRowData = $.fn.jqGrid.addRowData; 
$.jgrid.extend({ 
    addRowData: function (rowid, rdata, pos, src) { 
     if (pos === 'afterSelected' || pos === 'beforeSelected') { 
      if (typeof src === 'undefined' && this[0].p.selrow !== null) { 
       src = this[0].p.selrow; 
       pos = (pos === 'afterSelected') ? 'after' : 'before'; 
      } else { 
       pos = (pos === 'afterSelected') ? 'last' : 'first'; 
      } 
     } 
     return oldAddRowData.call(this, rowid, rdata, pos, src); 
    } 
}); 

コード上記addRowDataの2つの新しいオプションを導入：'afterSelected'と私は以下の提案します'beforeSelected'。 jqGridを作成する前にコードをインクルードすると、カスタムaddRowDataを使用してグリッドが作成されるため、フォームの追加のオプションとして新しいaddedrow: 'afterSelected'またはaddedrow: 'beforeSelected'を使用できます。

The demoは、その提案が有効であることを示しています。あなたはデモの他の多くのコードを見てはいけません。フォーム編集の現在の実装はローカル編集をサポートしていませんが、私はデモでこれを行う古いコードを使用しました。したがって、デモのコードは比較的長くなりますが、私がデモンストレーションしたい部分は簡単に内部を見つけることができます。