jqGrid-新しい行の一意のID

以下は、主な問題を解決し、投稿したJavaScriptコードを改善するためのアドバイスです。

まず、ローカルで新しいROWIDを生成します。ローカル編集シナリオには必要です。 サーバー上に新しいROWIDを生成する必要がありますバックエンドのデータをデータベースに保存する場合。典型的な実装は、PRIMARY KEYを持つことで構成されます int IDENTITYとして定義されています すべて テーブル。これにより、IDが一意で固定されます。一部の行を削除して新しい行を作成しても、古い行の編集として解釈されることはありません。これは、新しい行が常に新しいIDを取得するためです。これは、以前は（テーブルで）使用されていませんでした。

サーバー側で生成されたIDを利用する 1つには2つの主な選択肢があります：

行の追加操作のたびにグリッドを再読み込みします。
編集時にサーバーとの通信を拡張して、サーバーがデータベーステーブルで生成された新しいIDをjqGridに返すようにします。 aftersavefuncを使用できますサーバー上で行を正常に作成した後にROWIDを更新するためのコールバック（新しい行の追加のみ）。 RESTfulサービスの多くの標準実装は、完全な行データを返します。追加または編集の両方の包括的ID。 aftersavefunc内のデータを使用できますコールバックし、$("#" + rowid).attr("id", newRowid);のようなものを使用します新しい行を更新します。 IDをいくつかの追加の列に保存しました（非表示のidを使用する場合など）列）次に、setCellを使用する必要がありますセルを更新するためのメソッドも追加します。

最初の選択肢はほとんど単純であり、まず最初にそれを実装することをお勧めします。グリッドのリロードが、次々に多くの行を追加するユーザーを満足させない場合にのみ、もう少しコードを記述して、2番目のシナリオを実装する必要があります。

現在のコードはinlineNavを使用していますインライン編集を使用して実装された追加および編集操作、およびメソッドnavGrid 削除操作の場合、フォーム編集を使用して実装されます。削除を含むフォーム編集では、reloadAfterSubmit: trueを使用しますデフォルトではオプション。これは、グリッドがサーバーから再ロードされることを意味します（url: "/RestWithDatabaseConnection/rest/fetchData"から））すべての行を削除した後。 afterSaveFunctionを置き換えることで、主な問題を解決できます。次のように：

var afterSaveFunction = function () {
        $(this).trigger("reloadGrid", [{current: true, fromServer: true}]);
    };

オプションcurrent リロード後に現在の選択を保持し、オプションfromServer: true loadonce: trueを使用する場合にのみ意味がありますさらにオプション。 reloadGridOptions: {fromServer: true}を使用するだけです。 navGridのオプション サーバーからデータを強制的にリロードしますナビゲーターバーの[更新/再読み込み]ボタンをクリックします。グリッドに表示する必要のあるデータがそれほど多くない場合（たとえば、1000行未満）、そのような動作が推奨されます。

コードを改善するためのより一般的なアドバイス：

height: "auto"の使用を検討できます height: 250の代わりに rowNumを指定して、グリッドの最大の高さを管理します。価値。オプションscrollOffset: 0 この場合は不要になります。

サーバーから返されるデータの形式は、サーバー側のページング、並べ替え、フィルタリングを実装していないように見えます。。 loadonce: trueを使用する必要がありますおよびforceClientSorting: true オプション。 loadonce: true すべてを保存するようにjqGridに通知しますサーバーからローカルで内部dataに返されるデータパラメータ。 $('#grid').jqGrid("getGridParam", "data")を使用すると、いつでも配列にアクセスできます。。 rowNumの値（デフォルト値は20） localに使用されますページング。 sortname およびsortorder ローカルに使用されます並べ替え。そして、検索ダイアログを使用します（navGridによって追加されます））またはフィルターツールバー（filterToolbarによって追加））ローカル 検索/フィルタリング。これにより、サーバーコードが簡素化され、ユーザーの観点からグリッドのパフォーマンスが向上し、サーバーとクライアント間のインターフェイスが簡素化されます。サーバー上で拡張機能なしで従来のRESTfulインターフェースを使用できます。

別の注意：不要な非表示のidを削除することをお勧めします列（name:'id', label:'id', key: true, hidden: true, ... ）。 ROWIDに関する情報はidに保存されます行の属性（<tr> 要素）と、非表示の<td>に重複する情報を保持する必要はありません。すべての行の要素。

コードには他にも多くの部分があり、改善される可能性があります。たとえば、サーバー側で使用するDELETE操作は奇妙に思えます。 mtype: 'DELETE'を使用します、ただし、削除された行のIDを body内に送信します URLに追加するのではなく、サーバーへのリクエストの標準に対応し、HTTPDELETEには本文なしが含まれている必要があります。 jqGridオプションformDeletingを使用できますすべての削除オプションを指定し、urlを定義できます関数としてのパラメータ：

formDeleting: {
    mtype: "DELETE",
    url: function (rowid) {
        return "/RestWithDatabaseConnection/rest/delete/" + rowid;
    },
    ajaxDelOptions: { contentType: "application/json" },
    serializeDelData: function () {
        return "";
    }
}

/RestWithDatabaseConnection/rest/delete/のサーバーコードを変更する必要があります同じ通信プロトコルを使用し、URLから削除されたIDを取得します。

navOptionsを使用できます navGridのオプションを指定するための無料のjqGridのパラメータ：

navOptions: { edit: false, add: false }

（searchtext: 'Search' 使用する他のオプションにはデフォルト値があるようで、そこで削除しました。

REST標準に近づけるために、行の編集にはHTTP PUT操作を使用し、新しい行の追加にはHTTPPOSTを使用できます。 異なるを実装する必要がありますバックエンドでの両方の操作のエントリポイント。 /RestWithDatabaseConnection/rest/updateを使用しますすでに、/RestWithDatabaseConnection/rest/createを実装できます新しい行を追加するため。次のinlineEditingを使用できますたとえば、シナリオを実装するための変更：

inlineNavOptions: { add: true, edit: true },
inlineEditing: {
    url: function (id, editOrAdd) {
        return "/RestWithDatabaseConnection/rest/" +
            (editOrAdd === "edit" ? "update" : "create");
    },
    mtype: function (editOrAdd) {
        return editOrAdd === "edit" ? "PUT" : "POST";
    },
    keys: true,
    serializeSaveData: function (postData) {
        return JSON.stringify(dataToSend);
    },
    aftersavefunc: function () {
        $(this).trigger("reloadGrid", [{current: true, fromServer: true}]);
    },
    addParams: {
        addRowParams: {
            position: "last",
            serializeSaveData: function (postData) {
                var dataToSend = $.extend({}, postData);
                // don't send any id in case of creating new row
                // or to send `0`:
                delete dataToSend.id; // or dataToSend.id = 0; 
                return JSON.stringify(dataToSend);
            }
        }
    }
}