jqGridはrowNum
プロパティを公開します。このプロパティでは、各ページに表示する行数を設定できます。すべての行を表示するようにグリッドをどのように設定しますか?
今はrowNum
を<%= int.MaxValue %>
しかし、もっと良い方法があるかどうか疑問に思っています。
JqGridの最新バージョンでは、rowNumを-1に設定して、常にすべての行を表示するようにグリッドに指示できます。
rowNum: -1
最新のjqGridドキュメントを参照してください here 。
具体的には:
グリッドに表示するレコードの数を設定します。このパラメーターは、データを取得するサーバールーチンで使用するためにURLに渡されます。このパラメーターを10に設定(つまり、10個のレコードを取得)し、サーバーが15を返す場合、10個のレコードのみがロードされることに注意してください。このチェックを無効にするには、このパラメーターを-1(無制限)に設定します。
更新
残念ながら、この動作はjqGrid 3.6.3で壊れていました。 トニーからのこの投稿 によると:
はい、その通りです。その理由は、新しく導入されたスクロールです:1。将来、この動作を修正します。
そのため、jqGrid開発者はこの問題を認識しており、将来のリリースで修正する予定です。残念ながら、この投稿は1年以上前のものです...
現時点では、rowNum
を非常に大きな数に設定して、-1
の動作をシミュレートすることをお勧めします。
rowNum: ''
を使用して、以下のwhatispunkのソリューションを試すこともできます。ただし、ローカルデータ(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は、返される行の最大数よりもarbitrarily意的に大きい数であり、option [value =]行は、ユーザーインターフェイスが少し見栄えが良いようになっています。ジェンキーですが、私には有効です。
これは動作します:
// 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);
}
ページングをまったく使用したくない場合は、サーバー側のコードを変更して、すべての行を単純に返すようにします。 rowsパラメーターをまったく使用しないでください。
あなたが行リストを持ちたいが、すべてを表示するオプションも持っているなら、グリッドプロパティでこのようなことをしてください
jQuery("#statement_mods").jqGrid({
rowList:['ALL',30,50,100,200]
});
サーバーサイドのコードで、GET ['rows'] = 'ALL'の場合、rowsパラメーターを無視するようにしてください
設定rowNum:-1
私のためにトリックをしました
ナビゲーションバーでページネーションを設定した場合、グリッドの右下に書き込まれた行の総数にアクセスして、生成された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));
私はこれを機能させました:
$('#bla').jqGrid({
...
'rowNum' : 0,
'loadOnce' : true,
'loadComplete': function(data) {
$(this).jqGrid('setGridParam', 'rowNum', data.total);
},
...
});
これは、loadOnce
オプションをtrueに設定してもしなくても機能します。最初にrowNum
オプションを0に設定する必要があることに注意してください。このオプションを省略した場合、デフォルトでは20レコードが表示されます。また、ドキュメント化されたJSONリーダー形式でサーバーから合計行を返すと仮定しています。
Jqgrid.PagerSettings.PageSize = Max Row you want to display;
Jqgrid.ToolBarSettings.ToolBarPosition = ToolBarPosition.Hidden;
簡単な変更で解決しました:rowNum:inputDataArray.length
inputDataArrayは、グリッドに提供する配列です。
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」オプションがデータセット内の実際のレコード数に変更されます。
DocにjQGrid 4.5.4の時点でrowNumを-1に設定できないと表示されている場合でも、再び機能します(以前のバージョンでも)。
デフォルトでは、ページネーションを使用しないで使用している場合、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'
});
RowNumの設定: ''すべての行を取得します。