hifiveのデータグリッドライブラリを使いこなす（4）「遅延読み込み」
業務システムではデータ件数が膨大な数に上ることが多々あります。そんな時にデータを一気に表示するとデータベースの負荷が高くなったり、DOMレンダリングに時間を要するようになります。
そこで使いたいのが遅延読み込みです。hifiveのグリッドコントローラを使えば遅延読み込みも簡単に実装できます。
今回のデモはこちらにあります。動作しているところは次の画像の通りです。今回はデモなので300件としていますが、これが1万件、100万件となってもスムーズに動作します。
ベースとしてhifiveのデータグリッドライブラリを使いこなす（1）「グリッドの基本形」のグリッドを使います。
ダミーデータの用意
今回はダミーデータを返す関数を用意します。param.type は初期表示の際にsearchを、データを追加読み込みする際にfetchが呼ばれます。本来、この部分はWeb APIを介してデータを取得するところになります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function dumyAjax(param) { | |
| if (param.type === 'search') { | |
| return datagrid.util.delay(500, function() { | |
| return { | |
| fetchLimit: 300, | |
| fetchParam: param.param | |
| }; | |
| }); | |
| } else if (param.type === 'fetch') { | |
| var range = param.range; | |
| var dataArray = []; | |
| for (var i = 0, len = range.length; i < len; i++) { | |
| dataArray.push({ | |
| id: String(i + range.index), | |
| name: "User #" + i, | |
| position: "Position " + i | |
| }); | |
| } | |
| return datagrid.util.delay(500, function() { | |
| return { | |
| dataArray: dataArray | |
| }; | |
| }); | |
| } | |
| } |
初期設定
初期設定を行う変数を変更します。lazy（遅延読み込み）の指定を行います。fetchUnitはデータの取得単位です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var initParam = { | |
| searcher: { | |
| type: 'lazy', | |
| param: { | |
| fetchUnit: 100 | |
| } | |
| }, |
データソースの作成
表示するデータソースを表示する処理部分です。typeをAjaxと指定します。param.ajaxは先ほど提示したデータ取得関数（dumyAjax）を指定しています。また、search/fetch/find/commitの4つのキーを持たせる必要があります。そしてそれぞれrequest/responseの2つのキーを持っています。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var dataSource = datagrid.createDataSource({ | |
| idProperty: 'id', | |
| type: 'ajax', | |
| param: { | |
| ajax: dumyAjax, | |
| search: { | |
| request: function(param) { | |
| return { | |
| type: 'search', | |
| param: param | |
| }; | |
| }, | |
| response: function(result) { | |
| return result; | |
| } | |
| }, | |
| fetch: { | |
| request: function(param, range) { | |
| return { | |
| type: 'fetch', | |
| param: param, | |
| range: range | |
| }; | |
| }, | |
| response: function(result) { | |
| return result; | |
| } | |
| }, | |
| find: { | |
| request: $.noop, | |
| response: $.noop | |
| }, | |
| commit: { | |
| request: function(edit) { | |
| return { | |
| type: 'commit', | |
| edit: edit.getReplacedDataSet() | |
| }; | |
| }, | |
| response: $.noop | |
| } | |
| } | |
| }); |
これで作成は完了です。基本的なデータグリッドに対して幾つかのオプションを追加するだけで遅延読み込みに対応させられます。
データ件数が100万件など、膨大になっていてもデータグリッドを使うことでデータが適宜追加されるようになります。大量のデータを処理しなければならない業務フローにぴったりの使い方です。
hifive開発者ブログ 
コメントは受け付けていません。