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

by moongift : 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が初期化時の表示件数になります。

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が行ってくれます。

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

From → hifive

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