jqGrid は、rowNum
各ページに表示する行数を設定できるプロパティを公開します。すべての行を表示するようにグリッドを設定するにはどうすればよいですか?
今、私はrowNum
本当に高いものに設定して<%= int.MaxValue %>
いますが、もっと良い方法があるかどうか疑問に思っています.
jqGrid は、rowNum
各ページに表示する行数を設定できるプロパティを公開します。すべての行を表示するようにグリッドを設定するにはどうすればよいですか?
今、私はrowNum
本当に高いものに設定して<%= int.MaxValue %>
いますが、もっと良い方法があるかどうか疑問に思っています.
jqGrid の最新バージョンでは、rowNum を-1に設定して、常にすべての行を表示するようにグリッドに指示できます。
rowNum: -1
jqGrid の最新のドキュメントは、こちらを参照してください。
具体的には:
グリッドに表示するレコード数を設定します。このパラメータは、データを取得するサーバー ルーチンで使用するために URL に渡されます。このパラメーターを 10 に設定すると (つまり、10 レコードを取得する)、サーバーが 15 を返す場合、10 レコードのみがロードされることに注意してください。このチェックを無効にするには、このパラメーターを -1 (無制限) に設定します。
アップデート
残念ながら、この動作は jqGrid 3.6.3 で壊れていました。トニーからのこの投稿によると:
ええそれはそうです。その理由は、新しく導入された scroll:1 です。今後、この動作を修正します。
そのため、jqGrid の開発者はこの問題を認識しており、明らかに将来のリリースで修正する予定です。残念ながら、この投稿は1年以上前のものです...
現時点で推奨できるのはrowNum
、 の動作をシミュレートするために非常に大きな数に設定することだけです-1
。
を使用して、以下の whatispunk のソリューションを試すこともできますrowNum: ''
。ただし、ローカル データを含むグリッドでこれを試しました ( loadonce: true
)。行を並べ替えようとすると、グリッドのローカル データがすべて消えてしまいます。そのため、この問題が jqGrid の新しいバージョンで修正されていない限り (jqGrid 3.8.2 でテストしました)、このソリューションはローカル データを含むグリッドでは機能しないようです。フィードバックがある場合は、下にコメントを投稿してください。
jqGrid チームによると、これは現在修正されています。
ページャーの選択ボックスに、すべて -1 を含むさまざまな表示値を設定するためのサポートを追加しました。
ただし、修正を確認するためにテストする機会はありませんでした。おそらく、この変更は jqGrid 4.6.0 の後の次のリリースになるでしょう。
jqgrid (とにかく 3.5) には、これを行うためのエレガントな方法が組み込まれていないようです。これまでに見つけた最良の方法は、次のようなものをグリッド オプションに追加することです。
rowList:[10,20,30,100000000],
loadComplete: function() {
$("option[value=100000000]").text('All');
},
100000000 は、返される行の最大数よりも任意に大きい数であり、option[value=] 行は、ユーザー インターフェイスの見栄えを良くするためのものです。ジェンキーですが、私のために働きます。
ページングをまったく使用したくない場合は、サーバー側のコードを変更して、単にすべての行を返すようにします。行パラメーターをまったく使用しないでください。
行リストを持ちたいが、すべてを表示するオプションも必要な場合は、グリッド プロパティで次のようにします。
jQuery("#statement_mods").jqGrid({
rowList:['ALL',30,50,100,200]
});
次に、サーバー側のコードで、GET['rows']='ALL' の場合、rows パラメータを無視するようにします。
これは機能します:
// Step1 - defines the rows
jqGridOptions.rowList =[10, 50, 100, 500, 'All'];
...
...
// Step2 - Change the 'All' to a meaningful value
loadComplete: function (data) {
$(".ui-pg-selbox option[value='All']").val(1000);
}
ナビゲーション バーでページネーションを設定している場合は、グリッドの右下に書き込まれた行の総数にアクセスして、生成された RowList オプションに追加することもできます。
次のようなことをしてください:
// Get the total number of rows and delete space between numbers (Split the content of the div depending of the language (for me french)
var val=jQuery("#pager_right div").text().split('sur')[jQuery("#pager_right div").text().split('sur').length-1].split(' ').join('');
// And do the appending if the option isn't already added
if(!$(".ui-pg-selbox option[value='"+val+"']").length > 0)
jQuery(".ui-pg-selbox").append($('<option></option>').val(val).html(val));
Jqgrid.PagerSettings.PageSize = Max Row you want to display;
Jqgrid.ToolBarSettings.ToolBarPosition = ToolBarPosition.Hidden;
デフォルトでは、ページネーションを使用していない場合、JQ グリッドには最大 20 行が表示されます。
// To over come with this problem ,you can just write the bold mark
(rowNum:10000,):
$("#MasterDataDefinationGrid").jqGrid({
url: 'FetchData.aspx/GetDataFromDB',
datatype: 'json',
mtype: 'POST',
height: 300,
autowidth: true,
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
ajaxGridOptions: { contentType: "application/json" },
loadonce: true,
colNames: [Your column names],
colModel: [Your model],
formatter: 'actions',
pager: '#MasterDataDefinationPager', pgbuttons: false,pgtext:false,
multiselect: false,
ignoreCase: true,
**rowNum: 10000,**
loadtext: 'Loading ...',
gridview: true,
hidegrid: false,
jsonReader: {
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
root: function (obj) { return obj.d; },
repeatitems: false,
id: "0"
},
caption: 'Data'
});
私はこれを機能させました:
$('#bla').jqGrid({
...
'rowNum' : 0,
'loadOnce' : true,
'loadComplete': function(data) {
$(this).jqGrid('setGridParam', 'rowNum', data.total);
},
...
});
これは、loadOnce
オプションを true に設定してもしなくても機能します。最初にオプションを 0に設定する必要があることに注意してくださいrowNum
。このオプションを省略した場合でも、デフォルトで 20 件のレコードが表示されます。また、文書化された JSON リーダー形式でサーバーから合計行を返していると仮定しています。
簡単な変更で解決しました:rowNum:inputDataArray.length
ここで、inputDataArray は、グリッドに提供する配列です。
rowNum: '' を設定すると、すべての行が取得されます。
jquery.jqGrid.js に移動して、「rowNum:20」を「rowNum:Some-Really-Large-Number」に変更することもできます。jqGrid を定義するときは、rowNum を指定しないでください。次に、データセット全体を jqGrid に戻します。
loadComplete: function (data) {
//set our "ALL" select option to the actual number of found records
$(".ui-pg-selbox option[value='ALL']").val(data.records);
}
これにより、「ALL」オプションがデータセット内の実際のレコード数に変更されます。