Spread.Viewsはローカルデータだけでなく、サーバー側のデータのページングもサポートします。ページングを設定すると、1ページに表示するデータの量を制限できます。

ページングを有効にするには、gc.spread.views.paging.10.40.20162.0.min.jsファイルへの参照を追加します。

ページングには、以下のオプションを指定できます。

注意: paging.jsファイルへの参照を追加しても、［次へ］ボタンや［戻る］ボタンなど、ページ移動用のユーザーインタフェースは提供されません。dataView.dataに対してpageControllerを使用することで、独自のインタフェースを作成できます。

サンプルコード

1. ページングプラグインを使用できるように、gc.spread.views.paging.10.40.20162.0.min.jsファイルへの参照を追加します。

   <link rel="stylesheet" type="text/css" href="[Your Stylesheet Path]/font-awesome.min.css">
   <link rel="stylesheet" type="text/css" href="[Your Stylesheet Path]/pageui.css">
   <script src="[Your Script Path]/gc.spread.views.paging.10.40.20162.0.min.js" type="text/javascript"></script>
   <script src="[Your Script Path]/pageui.js" type="text/javascript"></script>

2. 列の定義を追加します。列定義の追加後、グリッドIDを呼び出してコードを初期化し、関数を定義します。

    var dataView;
     $(document).ready(function() {
                 dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), dataSource, columns,
                     new GC.Spread.Views.Plugins.GridLayout({
                         colWidth: 80,
                         rowHeight: 36,
                         startPageIndex: 2,
                         pageSize: 12
                     }));
   
                 var pageController = dataView.data.pageController;
                 var pager = new PageUI('#page-nav', pageController.getStatus());
   
                 pager.goToFirstEvent.addHandler(function() {
                     pageController.first();
                 });
   
                 pager.goToPreviousEvent.addHandler(function() {
                     pageController.previous();
                 });
   
                 pager.goToNextEvent.addHandler(function() {
                     pageController.next();
                 });
   
                 pager.goToLastEvent.addHandler(function() {
                     pageController.last();
                 });
   
                 pager.goToPageEvent.addHandler(function(e) {
                     pageController.goToPage(e.newPage);
                 });
   
                 pageController.statusChanged.addHandler(function(sender, newStatus) {
                     pager.updateStatus(newStatus);
           });

リモートデータのページング

サーバー側のデータを使用してページングを実装することもできます。サーバー側でページングを実行するには、データソースがloadRangeメソッドを提供する必要があります。このメソッドは、ページインデックスが変更されたとき、Spread.ViewsのpageControllerによって呼び出されます。

サンプルコード

1. dataSource変数内でloadRangeメソッドを定義します。

    var dataSource = {
                loadRange: function(params) {
                    $.ajax({
                        url: getUrl(params.pageSize * params.pageIndex, params.pageSize),
                        crossDomain: true,
                        success: function(result) {
                            var itemsTotalCount = result.m_Item1;
                            var currentPageDataSource = result.m_Item2;
                            params.success(currentPageDataSource, itemsTotalCount);
                        },
                        error: function(xhr, status) {
                            params.failed();
                            if (status !== 'abort') {
                                alert('Failed to load data from remote web site.');
                            }
                        }
                    });
                }
       };

2. グリッドIDを呼び出してコードを初期化し、関数を定義します。

   $(document).ready(function() {
   
               dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), dataSource, columns, new GC.Spread.Views.Plugins.GridLayout({
                   colWidth: 80,
                   rowHeight: 36,
                   pageSize: 12
               }));
   
               var pageController = dataView.data.pageController;
               var pager = new PageUI('#page-nav', pageController.getStatus());
   
               pager.goToFirstEvent.addHandler(function() {
                   pageController.first();
               });
   
               pager.goToPreviousEvent.addHandler(function() {
                   pageController.previous();
               });
   
               pager.goToNextEvent.addHandler(function() {
                   pageController.next();
               });
   
               pager.goToLastEvent.addHandler(function() {
                   pageController.last();
               });
   
               pager.goToPageEvent.addHandler(function(e) {
                   pageController.goToPage(e.newPage);
               });
   
               pageController.statusChanged.addHandler(function(sender, newStatus) {
                   pager.updateStatus(newStatus);
               });
               //focus data.view by default
               document.querySelector('#grid1').focus();
           });
   
           function getUrl(start, count) {
               return '//spread.cloudapp.net:8081/api/Records?start=' + start + '&count=' + count;
       }

参照

pageController
startPageIndex
pageSize