ComponentOne Studio MVC4 Classic ヘルプ
ページ付けされたグリッドの作成
MVC Classic ウィジェット > Wijgrid > ページ付けされたグリッドの作成

ページングナビゲーションを wijgrid ウィジェットに簡単に追加できます。この例では、allowPaging、pageSize、および pagerSettings オプションを設定して、ページャブルグリッドを作成する方法を説明します。例については、Web サイト（http://demo.componentone.com/ASPNET/MVCExplorer/grid/Paging）にアクセスし、MVC コントロールエクスプローラの grid > Paging サンプルのライブデモをご覧ください。

以下の手順を実行します。

  1. ASP.NET MVC 4 Wijmo アプリケーション を作成します。
  2. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。
  3. 依存関係をチェックして、プロジェクトが Wijmo の最新バージョンを参照していることを確認します。これらはページの <head> タグ内に配置されている必要があります。Wijmo の最新バージョンの依存関係は http://wijmo.c1.grapecity.com/download/#wijmo-cdn で確認できます。
  4. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
    ソースビュー
    コードのコピー 
    <div class="main demo">
    <table id="demo"></table>
    <div class="demo-options">
        <div class="option-row">
            <label for="pagerPosition">
                位置</label>
            <select id="pagerPosition">
                <option>下</option>
                <option>上</option>
                <option selected="selected">上下</option>
            </select>
        </div>
        <div class="option-row">
            <label for="pagerMode">
                モード</label>
            <select id="pagerMode">
                <option>nextPrevious</option>
                <option>nextPreviousFirstLast</option>
                <option>numeric</option>
                <option>numericFirstLast</option>
            </select></div>
        <div class="option-row">
            <label for="pageSize">
                ページのサイズ</label>
            <select id="pageSize">
                <option>1</option>
                <option>2</option>
                <option>2</option>
                <option>4</option>
                <option selected="selected">5</option>
                <option>10</option>
                <option>25</option>
                <option>50</option>
                <option>100</option>
            </select>
        </div>
    </div>
</div>

    このマークアップは１つのテーブル用のコンテンツを追加します。

  5. 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijgrid ウィジェットを初期化します。
    ソースビュー
    コードのコピー 
     <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#demo").wijgrid({
                allowPaging:true,
                pageSize: 5,
                pagerSettings:{ position:"topAndBottom" },
                data: [
                    [27, 'Canada', 'Adams, Craig', 'RW', 'R', 32, 2009, 'Seria, Brunei'],
                    [43, 'Canada', 'Boucher, Philippe', 'D', 'R', 36, 2008, 'Saint-Apollinaire, Quebec'],
                    [24, 'Canada', 'Cooke, Matt', 'LW', 'L', 30, 2008, 'Belleville, Ontario'],
                    [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L', 21, 2005, 'Cole Harbour, Nova Scotia'],
                    [1, 'United States', 'Curry, John', 'G', 'L', 25, 2007, 'Shorewood, Minnesota'],
                    [9, 'Canada', 'Dupuis, Pascal', 'W', 'L', 30, 2008, 'Laval, Quebec'],
                    [7, 'United States', 'Eaton, Mark', 'D', 'L', 32, 2006, 'Wilmington, Delaware'],
                    [26, 'Ukraine', 'Fedotenko, Ruslan', 'LW', 'L', 30, 2008, 'Kiev, U.S.S.R.'],
                    [29, 'Canada', 'Fleury, Marc-Andre', 'G', 'L', 24, 2003, 'Sorel, Quebec'],
                    [32, 'Canada', 'Garon, Mathieu', 'G', 'R', 31, 2009, 'Chandler, Quebec'],
                    [2, 'United States', 'Gill, Hal', 'D', 'L', 34, 2008, 'Concord, Massachusetts'],
                    [28, 'Canada', 'Godard, Eric', 'RW', 'R', 29, 2008, 'Vernon, British Columbia'],
                    [3, 'United States', 'Goligoski, Alex', 'D', 'L', 23, 2004, 'Grand Rapids, Minnesota'],
                    [55, 'Russia', 'Gonchar, Sergei (A)', 'D', 'L', 35, 2005, 'Chelyabinsk, U.S.S.R.'],
                    [13, 'United States', 'Guerin, Bill', 'RW', 'R', 38, 2009, 'Worcester, Massachusetts'],
                    [42, 'Canada', 'Jeffrey, Dustin', 'C', 'L', 21, 2007, 'Sarnia, Ontario'],
                    [48, 'Canada', 'Kennedy, Tyler', 'C', 'R', 22, 2004, 'Sault Ste.Marie, Ontario'],
                    [14, 'Canada', 'Kunitz, Chris', 'LW', 'L', 29, 2009, 'Regina, Saskatchewan'],
                    [58, 'Canada', 'Letang, Kristopher', 'D', 'R', 22, 2005, 'Montreal, Quebec'],
                    [65, 'United States', 'Lovejoy, Ben', 'D', 'R', 25, 2008, 'Canaan, New Hampshire'],
                    [71, 'Russia', 'Malkin, Evgeni (A)', 'C', 'L', 22, 2004, 'Magnitogorsk, U.S.S.R.'],
                    [14, 'Canada', 'Minard, Chris', 'C', 'L', 27, 2007, 'Owen Sound, Ontario'],
                    [44, 'United States', 'Orpik, Brooks', 'D', 'L', 28, 2001, 'San Francisco, California'],
                    [81, 'Slovakia', 'Satan, Miroslav', 'RW', 'L', 34, 2008, 'Jacovce, Czechoslovakia'],
                    [4, 'United States', 'Scuderi, Rob', 'D', 'L', 30, 1998, 'Syosset, New York'],
                    [11, 'Canada', 'Staal, Jordan', 'C', 'L', 20, 2006, 'Thunder Bay, Ontario'],
                    [17, 'Czech Republic', 'Sykora, Petr', 'RW', 'L', 32, 2007, 'Plzen , Czechoslovakia'],
                    [22, 'United States', 'Taffe, Jeff', 'LW', 'L', 28, 2007, 'Hastings, Minnesota'],
                    [25, 'Canada', 'Talbot, Maxime', 'C', 'L', 25, 2002, 'LeMoyne, Quebec'],
                    [15, 'Canada', 'Zigomanis, Michael', 'C', 'R', 28, 2008, 'Toronto, Ontario']
                ],
                columns: [
                    { headerText:"Number" }, { headerText: "Nationality" }, { headerText:"Player" }, { headerText: "Position" },
                    { headerText:"Handedness" }, { headerText: "Age" }, { headerText:"Acquired" }, { headerText:"Birthplace" }
                ]
            });
            $("#pagerPosition").change(function (e) {
                var pagerSettings = $.extend({}, $("#demo").wijgrid("option", "pagerSettings"));
                pagerSettings.position = $(e.target).val();
                $("#demo").wijgrid("option", "pagerSettings", pagerSettings);
            });
            $("#pagerMode").bind("change", function (e) {
                var pagerSettings = $.extend({}, $("#demo").wijgrid("option", "pagerSettings"));
                pagerSettings.mode = $(e.target).val();
                $("#demo").wijgrid("option", "pagerSettings", pagerSettings);
            });
            $("#pageSize").bind("change", function (e) {
                $("#demo").wijgrid("option", "pageSize", parseInt($(e.target).val()));
            });
        });
    </script>

    これは、グリッドを初期化し、ページャを設定します。

このトピックの作業結果

［F5］を押してアプリケーションを実行し、グリッドでページングが行えることを確認します。ページングの表示方法を変更するには、［位置］、［モード］、および［ページサイズ］ドロップダウンボックスで別の値を選択します。

関連トピック
グリッド選択モードの設定

 

 

Copyright © GrapeCity inc. All rights reserved.