Wijmo UI for the Web
カスタムページング
Wijmo ユーザーガイド > ウィジェット > Grid > 概念 > ページング > カスタムページング

wijgridでは、グリッドの組み込みページングを使用しないで、カスタムボタンでグリッドのページを移動することも可能です。

クイックスタートの例に基づき、wijgridのpageIndexオプションを使用することで以下のようなカスタムページングを実現できます。

ソース全体
コードのコピー 
<!DOCTYPE HTML>
<HTML>
<head>
<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128".min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.wijmo.com/external/cultures/globalize.culture.js"
 type="text/javascript"></script>  
<!--RequireJs-->
<script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>

<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
                
            }
    });
</script>
<!-- #Region "css" -->
<style type="text/css">
    .pagebuttons
    {
        float : left;
    }
    .pagebuttontext
    {
        float : left;
        width : 20px;
        text-align : center;
    }
</style>
<!-- #End Region -->
<!-- #Region "script" -->
<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
            allowPaging: true, 
            pageSize: 3, 
            pagerSettings: { position: "none", pageButtonCount:"2"}, 
            cellClicked: function (e, args) {
                    alert(args.cell.value());
                },
            data: [
                [27, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C'],
                [1, 'United States', 'Curry, John', 'G'],
                [23, 'Canada', 'Aalto, Antti', 'C', 'L'],
                [45, 'Canada', 'Acton, Keith', 'C', 'R'],
                [69, 'Canada', 'Ahern, Fred', 'RW', 'R'],
            ],
            columns: [
                {headerText: "Number"},
                {headerText: "Nationality"},
                {headerText: "Player"},
                {headerText: "Position"}
            ]
        });
    });
    });
   function seekPage(offset) { 
    var index = $("#wijgrid").wijgrid("option", "pageIndex"); 
    index += offset; 
       $("#wijgrid").wijgrid("option", "pageIndex", index); 

        var currentPage = $("#wijgrid").wijgrid("option", "pageIndex") + 1; 
        $("#currentPage").text(currentPage); 
     } 
</script>
<!-- #End Region -->
  </head>
<body>
<!-- #Region "HTML" -->
<table id="wijgrid">
</table>
 <div> 
<button title="first page" class="pagebuttons" onclick="seekPage(-1000000)"><span class="ui-icon ui-icon-seek-first" /></button> 
<button title="previous page" class="pagebuttons" onclick="seekPage(-1)"><span class="ui-icon ui-icon-seek-prev" /></button> 
<span class="pagebuttontext" id="currentPage">1</span>
<button title="next page" class="pagebuttons" onclick="seekPage(+1)"><span class="ui-icon ui-icon-seek-next" /></button> 
<button title="last page" class="pagebuttons" onclick="seekPage(+1000000)"><span class="ui-icon ui-icon-seek-end" /></button> 
</div> 
<!-- #End Region -->
</body>
</HTML>

詳細手順

  1. HTML ファイルの <body> セクションに以下のHTMLを追加することで、グリッドを初期化し、追加するカスタムボタンを定義します。
    HTML
    コードのコピー 
    <table id="wijgrid">
</table>
 <div> 
<button title="first page" class="pagebuttons" onclick="seekPage(-1000000)"><span class="ui-icon ui-icon-seek-first" /></button> 
<button title="previous page" class="pagebuttons" onclick="seekPage(-1)"><span class="ui-icon ui-icon-seek-prev" /></button> 
<span class="pagebuttontext" id="currentPage">1</span>
<button title="next page" class="pagebuttons" onclick="seekPage(+1)"><span class="ui-icon ui-icon-seek-next" /></button> 
<button title="last page" class="pagebuttons" onclick="seekPage(+1000000)"><span class="ui-icon ui-icon-seek-end" /></button> 
</div>

  2. ボタンとテキストの配置など設定を追加するには、<head> タグ内の参照の下に以下のCSSスタイルを追加します。
    CSS
    コードのコピー 
    <style type="text/css">
    .pagebuttons
    {
        float : left;
    }
    .pagebuttontext
    {
        float : left;
        width : 20px;
        text-align : center;
    }
</style>

  3. CSSスタイル定義の下にカスタムボタンの操作を実装するスクリプトを追加します。この例では、wijgridのpageIndexオプションを使用してカスタムボタンでグリッドのページを前へ／次へ／先頭へ／最後へ移動する操作を実装しています。
    スクリプト
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
            allowPaging: true, 
            pageSize: 3, 
            pagerSettings: { position: "none", pageButtonCount:"2"}, 
            cellClicked: function (e, args) {
                    alert(args.cell.value());
                },
            data: [
                [27, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C'],
                [1, 'United States', 'Curry, John', 'G'],
                [23, 'Canada', 'Aalto, Antti', 'C', 'L'],
                [45, 'Canada', 'Acton, Keith', 'C', 'R'],
                [69, 'Canada', 'Ahern, Fred', 'RW', 'R'],
            ],
            columns: [
                {headerText: "Number"},
                {headerText: "Nationality"},
                {headerText: "Player"},
                {headerText: "Position"}
            ]
        });
    });
    });
   function seekPage(offset) { 
    var index = $("#wijgrid").wijgrid("option", "pageIndex"); 
    index += offset; 
       $("#wijgrid").wijgrid("option", "pageIndex", index); 

        var currentPage = $("#wijgrid").wijgrid("option", "pageIndex") + 1; 
        $("#currentPage").text(currentPage); 
     } 
</script>

  4. HTML ファイルを保存し、ブラウザで開きます。

関連トピック

ページング
クイックスタート

参照

wijgrid メソッド
allowPaging フィールド
pageIndex フィールド
pagerSettings フィールド
pageSize フィールド

 

 

Copyright © GrapeCity inc. All rights reserved.