web-dev-qa-db-ja.com

jqGridですべての行を表示する方法は?

jqGridはrowNumプロパティを公開します。このプロパティでは、各ページに表示する行数を設定できます。すべての行を表示するようにグリッドをどのように設定しますか?

今はrowNum<%= int.MaxValue %>しかし、もっと良い方法があるかどうか疑問に思っています。

47
Jon Erickson

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でテストしました)。フィードバックがある場合は、下にコメントを投稿してください!


更新-2014年4月16日

jqGridチームによると これは修正されました:

すべての-1を含むページャー選択ボックスに異なる表示値を設定するサポートを追加しました。

ただし、修正を確認するためにテストする機会はありませんでした。おそらく、この変更はjqGrid 4.6.0以降の次のリリースで行われるでしょう。

53
Justin Ethier

jqgrid(とにかく3.5)には、これを行うためのエレガントな方法が組み込まれていないようです。私がこれまでに見つけた最高の方法は、グリッドオプションに次のようなものを追加することです。

rowList:[10,20,30,100000000],
loadComplete: function() {
    $("option[value=100000000]").text('All');
},

100000000は、返される行の最大数よりもarbitrarily意的に大きい数であり、option [value =]行は、ユーザーインターフェイスが少し見栄えが良いようになっています。ジェンキーですが、私には有効です。

9
C Dolan

これは動作します:

// 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);
}
4

ページングをまったく使用したくない場合は、サーバー側のコードを変更して、すべての行を単純に返すようにします。 rowsパラメーターをまったく使用しないでください。

あなたが行リストを持ちたいが、すべてを表示するオプションも持っているなら、グリッドプロパティでこのようなことをしてください

jQuery("#statement_mods").jqGrid({
  rowList:['ALL',30,50,100,200]
});

サーバーサイドのコードで、GET ['rows'] = 'ALL'の場合、rowsパラメーターを無視するようにしてください

4
Yashvit

設定rowNum:-1私のためにトリックをしました

2
Salty

ナビゲーションバーでページネーションを設定した場合、グリッドの右下に書き込まれた行の総数にアクセスして、生成された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));
2
JULIEN

私はこれを機能させました:

$('#bla').jqGrid({
        ...
        'rowNum'      : 0,
        'loadOnce'    : true,
        'loadComplete': function(data) {
            $(this).jqGrid('setGridParam', 'rowNum', data.total);
        },
        ...
});

これは、loadOnceオプションをtrueに設定してもしなくても機能します。最初にrowNumオプションを0に設定する必要があることに注意してください。このオプションを省略した場合、デフォルトでは20レコードが表示されます。また、ドキュメント化されたJSONリーダー形式でサーバーから合計行を返すと仮定しています。

1
lotjuh
Jqgrid.PagerSettings.PageSize = Max Row you want to display;
Jqgrid.ToolBarSettings.ToolBarPosition = ToolBarPosition.Hidden;
1
Ankur

簡単な変更で解決しました:rowNum:inputDataArray.length

inputDataArrayは、グリッドに提供する配列です。

1
Nilesh Shukla

Jquery.jqGrid.jsに移動して、「rowNum:20」を「rowNum:Some-Really-Large-Number」に変更することもできます。 jqGridを定義するとき、rowNumを指定しないでください。次に、データセット全体をjqGridに戻します。

0
Ron
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」オプションがデータセット内の実際のレコード数に変更されます。

0
Chris

DocにjQGrid 4.5.4の時点でrowNumを-1に設定できないと表示されている場合でも、再び機能します(以前のバージョンでも)。

0
DevAntoine

デフォルトでは、ページネーションを使用しないで使用している場合、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'
        });
0
VCody

RowNumの設定: ''すべての行を取得します。

0
mikesigs