Concepts.Paging Overview 
準備中...
Dataludi Gridはグリッドに繋がったデータセットの一部を表示する方式で 一般的なウェブアプリケーションのページング機能をクライアントレベルで具現する。 もちろん、動作の方式によって対応するサーバーロジックが具現可能であるべきである。 グリッドの方の具現方式はデータをロードする時点や実際にロードするデータの量によって少しずつ異なる。 TreeViewは現在ページングを支援しない。
ページングで設定する全体のページ数、及び全体行の数は実際のデータセットと一致する必要はない。 また、各ページに表示される行達も同じである。 つまり、グリッドのページングはページング設定で指定した通りに論理的概念である現在のページに一定の数のデータたちを表示することに過ぎない。 現在ページに表示される行たち以外に他のページ毎行の目録を別途に保管したりもしない。 勿論、実際のデータセットの状態と一致させて具現するのが一般的である。
1. ロードされたデータの表示
データセットにすでにロードされたdataを指定した位置から指定したページのサイズの分だけ表示する。
まず、GridView.setPagingで一つのページのサイズとページの数を指定する。 pageCountを指定しなかったか、0より小さい値で指定するとグリッドに表示されるデータ行達の数と setPagingやpageSizeで指定したページのサイズに合わせて全体ページの数が自動的に計算される。 以後、pageIndexを変更す度にページの位置に合う該当のデータ行達をグリッドに表示する。
2. 必要な時点にデータロード
全体行の数やページの数が予測できるが全体データを先にロードする必要がない時に具現可能な方式である。 行の数を知ることができれば、データセットのrowCountを指定してページの数が自動的に計算されるようにし、 そうでなければ予想される全体のページの数をsetPagingや必要な時の度にsetPageCountを呼び出して指定するべきである。 指定されたページの数より大きい値でpageIndexを指定することはできないためである。
pageIndexを変更する時、もしくはonPageIndexChangedイベント内で ページの位置に該当するデータがデータセットのまだロードされてない状態なら 該当位置のデータ行達をサーバーから再びロードしてデータセットに満たす。 クライアントにデータがすでに存在していればGridDataSet.updateRowsなどを使う。
特定行のデータがロードされたかはDataSet.hasDataメソッドで知ることができる。
$('#incPage').click(function () {
var oldPage = grid.pagIndex();
var newPage = oldPage + 1;
grid.setPageIndex(newPage);
if (newPage != oldPage) {
var row = grid.getRow(newPage * grid.pageSize());
if (row && !dataset.hasData(row.dataIndex()) {
// データをロードする。
$.ajax({
url: "/data/path/orders.csv",
dataType: 'text',
success: function (data) {
DataLudi.loadCsvData(dataset, data, {
count: pageSize,
fillMode: 'update',
fillPos: pageIndex * pageSize
});
}
};
// dataがすでに存在していれば、
dataset.updateRows(pageIndex * pageSize, rows, 0, pageSize);
}
}
});
3. 任意の位置データの表示
グリッドページングを具現するため、データセットとページの位置が必ず正確に対応される必要はない。 例えば、一つのページのサイズの分だけのデータをデータセットが保管して、ページが変わる度にデータを新しくロードすることもできる。 または、ページの位置によって特定の行達を表示することもできる。
まず、こんな方式でページングを具現するためには上のケースと同じようにまずpageCountを指定しなければならない。 そして、setPageOffsetやsetPageAndOffsetを利用して現在のページに表示する行の位置を 正常的なページの行の位置とは違うように指定することができる。
$('#incpage').click(function (ev) {
// いつも最初の行から表示する。
var newPage = grid.pageIndex() + 1;
var size = grid.pageSize();
grid.setPageOffset(-newPage * size);
grid.setPageIndex(newPage);
// ページの位置のデータを再びロードする。
loadData(newPage * size);
});
4. 特定の行の表示
現在ページに表示されるデータ行達を明示的に指定することもできる。 つまり、ページング設定によって自動的に決定されるデータ行達の代わり、 setPageRowsやsetPageAndRowsを呼び出して特定の行達が表示されたりすることができる。 ページの位置を指定したり、onPageIndexChangedイベント内で呼び出せばいい。
grid.onPageIndexChanged = function (grid, oldPage, newPage) {
grid.setPageRows([0, 1, 2, 3, 4, 5]);
});
5. ソーティング及びフィルタリング
グリッドは基本的に現在ページに表示される行達を基準にソーティングとフィルタリングを実行する。 しかし、GridBase.operateOptionsのpageSortingと pageFilteringを 各々falseに指定して、現在のページの行達を構成する前に全体行達を対象とするソーティングとフィルタリングが実行できるようにすることができる。
全体行を基準にソーティングやフィルタリングをする場合、上で説明した遅延呼び込みの方式や、 位置を指定する方式を具現することが複雑になることがあり得る。
- See Also
- GridView.setPaging
- GridView.pageSize
- GridView.pageCount
- GridView.pageIndex
- GridView.pageOffset
- GridView.pageRows
- GridView.setPageAndOffset
- GridView.setPageAndRows
- GridView.onPaged
- GridView.onPageCountChanged
- GridView.onPageIndexChanging
- GridView.onPageIndexChanged