ComponentOne Studio MVC5 Classic ヘルプ
グルーピングと集計のカスタマイズ
MVC Classic ウィジェット > Wijgrid > グルーピングと集計のカスタマイズ

カスタマイズされたグルーピングを wijgrid ウィジェットに簡単に追加できます。例については、Web サイト（http://demo.componentone.com/ASPNET/MVCExplorer/grid/GroupingAndAggregates）にアクセスし、MVC コントロールエクスプローラの grid > GroupingAndAggregates サンプルのライブデモをご覧ください。

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

  1. ASP.NET MVC 5 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">
        <thead>
            <tr>
                
<th>OrderID</th><th>ProductID</th><th>UnitPrice</th><th>Quantity</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>10248</td><td>11</td><td>14</td><td>12</td>
            </tr><tr>
                <td>10248</td><td>42</td><td>9.8</td><td>10</td>
            </tr><tr>
                <td>10248</td><td>72</td><td>34.8</td><td>5</td>
            </tr><tr>
                <td>10249</td><td>14</td><td>18.6</td><td>9</td>
            </tr><tr>
                <td>10249</td><td>51</td><td>42.4</td><td>40</td>
            </tr><tr>
                <td>10250</td><td>41</td><td>7.7</td><td>10</td>
            </tr><tr>
                <td>10250</td><td>51</td><td>42.4</td><td>35</td>
            </tr><tr>
                <td>10250</td><td>65</td><td>16.8</td><td>15</td>
            </tr><tr>
                <td>10251</td><td>22</td><td>16.8</td><td>6</td>
            </tr><tr>
                <td>10251</td><td>57</td><td>15.6</td><td>15</td>
            </tr><tr>
                <td>10251</td><td>65</td><td>16.8</td><td>20</td>
            </tr><tr>
                <td>10252</td><td>20</td><td>64.8</td><td>40</td>
            </tr><tr>
                <td>10252</td><td>33</td><td>2</td><td>25</td>
            </tr><tr>
                <td>10252</td><td>60</td><td>27.2</td><td>40</td>
            </tr><tr>
                <td>10253</td><td>31</td><td>10</td><td>20</td>
            </tr><tr>
                <td>10253</td><td>39</td><td>14.4</td><td>42</td>
            </tr><tr>
                <td>10253</td><td>49</td><td>16</td><td>40</td>
            </tr>
        </tbody>
    </table>
</div>

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

  5. 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijgrid ウィジェットを初期化します。
    ソースビュー
    コードのコピー 
     <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#demo").wijgrid({
                allowSorting:true,
                columns: [
                    {
                        sortDirection:"ascending",
                        aggregate:"count",
                        groupInfo: {
                            position:"header",
                            outlineMode:"startCollapsed",
                            headerText:"{1}:{0}, Count={2}"
                        }                    },
                    {},
                    { dataType:"currency", aggregate:"sum" },
                    { dataType:"number", dataFormatString:"n0", aggregate:"sum" }                ]
            });
        });
    </script>

    このスクリプトは、グリッドを初期化し、集計およびグルーピングオプションを設定します。

このトピックの作業結果

［F5］を押してアプリケーションを実行し、当初縮小されているグループがグリッドに含まれていることを確認します。各グループの横にある三角形のアイコンをクリックして、グループを拡張／縮小します。

 

 

Copyright © GrapeCity inc. All rights reserved.