HTMLページに2つのグリッドがあります。一方のグリッドの行をクリックすると、選択した行に基づいてもう一方のグリッドにデータをロードする必要があります。
したがって、2番目のグリッドの追加パラメーターとしてrowIdを送信する必要があります。方法がわかりません。
(サブグリッド機能は使いたくない)
HTMLページに2つのグリッドがあります。一方のグリッドの行をクリックすると、選択した行に基づいてもう一方のグリッドにデータをロードする必要があります。
したがって、2番目のグリッドの追加パラメーターとしてrowIdを送信する必要があります。方法がわかりません。
(サブグリッド機能は使いたくない)
このシナリオの例は、 [詳細]、[マスターの詳細]の順に選択すると、 http://trirand.com/blog/jqgrid/jqgrid.htmlにあります。以下に、コードの小さなバリエーションを含めます。
HTMLページに2つのグリッドがあるとします。1つは「マスター」グリッドで、もう1つは「詳細」グリッドです。マスターグリッドに選択された行に基づいてデータをロードする必要があります。両方のグリッドが、JSON形式でデータを送り返すサーバーからのデータを埋める必要があるとします。マスターグリッドで単一行の選択(multiselect: true
定義されていない)を使用するとします。
これがコードテンプレートです
var detailsTitle = 'Details';
var grid = jQuery('#master').jqGrid({ // ... some parameters
url: masaterUrl,
datatype: 'json',
colModel: [ // ... some column definitions
{ name: 'Name', width: 120 }
],
onSelectRow: function(id) {
var selName = grid.getCell(id, 'Name');
gridDetails.setCaption(detailsTitle + ' for "' + selName + '"');
gridDetails.setGridParam({
//url: urlGetDetail + '/' + encodeURIComponent(id),
//url: urlGetDetail + '?' + $.param( { userId: id });
postData: { userId: id },
page: 1,
datatype: 'json' }).trigger('reloadGrid');
}
}).navGrid('#pager', {}, {}, {}, {
afterSubmit: function(response, postdata) {
gridDetails.setCaption(detailsTitle);
gridDetails.setGridParam({ datatype: 'local',
page: 1 }).trigger('reloadGrid');
return [true, ''];
}
});
var gridDetails = jQuery('#detail').jqGrid({ // ...
caption: detailsTitle,
url: urlDetail,
//postData: { userId: function() { return grid.getGridParam('selrow'); } },
datatype: 'local'
});
次に、コードへのコメントをいくつか示します。最初は、マスターグリッドで行は選択されません。datatype: 'local'
そのため、詳細グリッドのパラメーターとして、データの読み込みを拒否するように設定しました。
マスターグリッドの行を選択する場合は、詳細グリッドのタイトル(キャプション)を設定し、詳細グリッドをに変更datatype
して'json'
を設定しpage: 1
ます。パラメータのリセットは、page
追加のパラメータとしてサーバーに送信されるため、重要です。最後の選択でユーザーが前に別のページを選択した場合、新しい選択では、詳細グリッドが空になる前ほど多くのデータ行がありません。この問題を解決するには、常にpage
1に設定する必要があります。
ここでの主な作業id
は、詳細グリッドに対するサーバー要求のパラメーターとしてマスターグリッドのを送信することです。ここにいくつかのオプションがあります:
'?userId='+id
。id
これをより慎重に行うには、いくつかの特殊文字を含む可能性があることを考慮に入れる必要があります。'?userId='+encodeURIComponent(id)
したがって、代わりに使用する必要があります。この関数jQuery.param
は、より読みやすい形式で同じことを行います。したがって、'?'+jQuery.param({userId:id})
代わりに使用できます。url
詳細グリッドのがREST形式(「blabla / id」など)である必要がある場合は、この方法を使用することをお勧めします。この場合、url
詳細グリッドをに設定するのurlDetail+'/'+encodeURIComponent(id)
がおそらく最良の方法です。postData:{userId:id}
。'?'+jQuery.param({userId:id})
これは、サーバーへのリクエストにHTTPGETを使用する場合と同じになります。この方法の利点は、HTTPPOSTも使用することです。次に、パラメータはURLに追加されるのではなく、本文に投稿されます。したがって、の使用にpostData
は小さな利点があります。onSelectRow
、詳細グリッドにpostData
関数として追加のパラメーターを含めることができます(コメント行を参照)。この方法は、小さな例外を除いて非常にうまく機能します。たとえば、マスターグリッドで選択した行が削除されると、詳細グリッドをクリアすることが困難になります。他のいくつかの状況では、柔軟性も低くなります。したがって、この可能性についてのみ言及したかったのですが、コメントとしてのみ含めました(この方法に関心がある場合は、組み込みの検索/フィルターボックスを使用せずにjqGridデータをフィルター処理する方法を参照してください)。