hifiveのデータグリッドライブラリを使いこなす（4）「遅延読み込み」

業務システムではデータ件数が膨大な数に上ることが多々あります。そんな時にデータを一気に表示するとデータベースの負荷が高くなったり、DOMレンダリングに時間を要するようになります。

そこで使いたいのが遅延読み込みです。hifiveのグリッドコントローラを使えば遅延読み込みも簡単に実装できます。

今回のデモはこちらにあります。動作しているところは次の画像の通りです。今回はデモなので300件としていますが、これが1万件、100万件となってもスムーズに動作します。

ダミーデータの用意

今回はダミーデータを返す関数を用意します。param.type は初期表示の際にsearchを、データを追加読み込みする際にfetchが呼ばれます。本来、この部分はWeb APIを介してデータを取得するところになります。

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

	}
	}

view raw

index.js

hosted with ❤ by GitHub

初期設定

初期設定を行う変数を変更します。lazy（遅延読み込み）の指定を行います。fetchUnitはデータの取得単位です。

	var initParam = {
	searcher: {
	type: 'lazy',
	param: {
	fetchUnit: 100
	}
	},

view raw

index.js

hosted with ❤ by GitHub

データソースの作成

表示するデータソースを表示する処理部分です。typeをAjaxと指定します。param.ajaxは先ほど提示したデータ取得関数（dumyAjax）を指定しています。また、search/fetch/find/commitの4つのキーを持たせる必要があります。そしてそれぞれrequest/responseの2つのキーを持っています。

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

view raw

index.js

hosted with ❤ by GitHub

これで作成は完了です。基本的なデータグリッドに対して幾つかのオプションを追加するだけで遅延読み込みに対応させられます。

データ件数が100万件など、膨大になっていてもデータグリッドを使うことでデータが適宜追加されるようになります。大量のデータを処理しなければならない業務フローにぴったりの使い方です。

hifive開発者ブログ