SMART datagrid v.1 > Examples

Paging  Example  準備中...

SMART datagrid グリッドでPagingは グリッドに繋がったDataSetの全体行の代わり特定の位置から特定の数の行達を表示する方式で具現する。 

今回のサンプルでは一番単純な方式でページングを具現する。 データをロードした後GridView.setPagingメソッドでページのサイズを指定すれば内部的に全体のページの数が決定され、 グリッドには指定した行の数だけに表示される。 

    var count = parseInt($('#edtPageCount').val());
    grdMain.setPaging(true, 10, isNaN(count) ? -1 : count);

ページングの状態が変更になれば、つまり新しくページングを始めるかページングが取消になったら、 onPagedイベントが発生する。 

    grdMain.onPaged = function (grid, paged) {
        $('#pagePanel').toggle(paged);  
    };

以後にはGridView.pageIndexプロパティーでページの間を移動することができる。 ページ変更の前にはonPageIndexChangingイベントが、 変更の後にはonPageIndexChangedイベントが発生する。 変更の前のイベントハンドラーで明示的にfalseをリターンすれば移動しない。 

Page Size:  Page Count:  Paging 

ページ変更の後イベンドではページの移動のボタン達の活性状態などを変更してユーザーにページの位置を知らせることができる。 

    grdMain.onPageIndexChanged = function (grid, oldPage, newPage) {
        var count = grdMain.pageCount();
        $('#btnFirst').prop('disabled', newPage <= 0);
        $('#btnPrev').prop('disabled', newPage <= 0);
        $('#btnNext').prop('disabled', newPage >= count - 1);
        $('#btnLast').prop('disabled', newPage >= count - 1);
    };

ページのサイズが変更になったらGridView.onPageCountChangedイベントが発生する。 

ソースを見る 

See Also

ページングの概要

GridView.setPaging

GridView.pageIndex

GridView.pageCount

GridView.onPaged

GridView.onPageCountChanged

GridView.onPageIndexChanging

GridView.onPageIndexChanged

Examples

ページデータローディング

ページ行の位置を指定

ページに特定の行達を表示