コンテンツへスキップ

hifiveのデータグリッドライブラリを使いこなす(7)「データの表示件数を変更する」

by : 2017/04/26

大量のデータを表示する際に要望に上がってくるのがデータの表示件数を変更する機能です。ページネーションと組み合わせて使いますが、今回はまずデータ件数の変更について紹介します。

実際に動いているデモはこちらにあります。また、動いている画像は下記になります。

データの表示件数を指定する

まずHTML側でデータの表示件数を指定できるようにします。今回は次のようなドロップダウンを用意しました。

<div class="form-group">
<label for="exampleInputEmail1">件数</label>
<select class="form-control" id="paging">
<option>5</option>
<option selected>10</option>
<option>20</option>
<option>50</option>
</select>
</div>

view raw
index.html
hosted with ❤ by GitHub

データサーチャーを用意する

hifiveのグリッドライブラリにおいてデータの表示件数を制御するのは gridController.dataSearcher になります。次のように用意します。

var scrollGridController = {
_dataSearcher: null,
__ready: function() {
:
this._dataSearcher = this._gridController.getDataSearcher();
:
}
}

view raw
index.js
hosted with ❤ by GitHub

さらに初期化の変数を変更します。pagingをtrueにし、pageSizeが初期化時の表示件数になります。

var initParam = {
searcher: {
type: 'all',
paging: {
enable: true,
pageSize: 10
}
},
:
}

view raw
index.js
hosted with ❤ by GitHub

動的に表示件数を変更する

そしてドロップダウンで件数を指定した際に、動的にグリッドの表示件数を変更します。

'#paging change': function(context, $el) {
context.event.preventDefault();
this._dataSearcher.setPageSize(parseInt($el.val()));
}

view raw
index.js
hosted with ❤ by GitHub

このように、件数を数値で渡すのがポイントです。実際の表示はgridControllerが行ってくれます。


データはすでにコントローラ内部にありますので、件数変更は素早く行われます。次回はページネーションの実装を紹介します。

データ件数の変更デモ

banner_02

From → hifive

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。