機能

はじめに

はじめに

PivotEngineコンポーネントをIEnumerableオブジェクトに連結できます。

機能

OutlineMode  ShowValueFieldHeaders 

ビュー定義を保存または復元するには、viewDefinitionプロパティを使用できます。次に例を示します。

PivotGridコントロールは、FlexGridコントロールの拡張です。したがって、
FlexGridに付属する拡張モジュールでサポートされている形式であれば、どの形式にもエクスポートできます。
サポートされている形式には、.xlsx、.csv、.pdfなどがあります。

たとえば、次のボタンをクリックすると、現在のビューと現在のビューを転置したバージョンの2つのシートを含むExcelファイルが作成されます。

設定

説明

このサンプルでは、集計するデータを提供するIEnumerableオブジェクトにPivotEngineを連結します。
すべてのデータがクライアントに転送されます。PivotEngineは、Wijmo 5 OLAPコントロールなどのクライアント側にあるデータを計算します。
PivotPanelコントロールとPivotGridコントロールはPivotEngineに連結されます。
PivotPanelコントロールでビュー定義を変更できます。
その結果、PivotGridコントロールに集計データが表示されます。
PivotGridコントロール内のセルをダブルクリックすると、詳細な生データがグリッドに表示されます。
PivotGridOutlineModeプロパティを使用すると、画面に表示される余白を小さくすることができます。
1つの値フィールドしか使用できない場合でも、showValueFieldHeadersプロパティを使用して、PivotGridに値フィールドのヘッダーを強制的に表示することもできます。

データ行数が10,000より少ない場合は、タグのsource-collection属性またはread-action-url属性を設定できます。
そうでない場合は、DataEngineページで使用されるタグのservice-url属性を設定してください。

using OlapExplorer.Models;
using System.Collections;
using Microsoft.AspNetCore.Mvc;
using System.Linq;
using System.Collections.Generic;
using C1.Web.Mvc.Olap;

namespace OlapExplorer.Controllers.Olap
{
    public partial class OlapController : Controller
    {
        private static IEnumerable Data = ProductData.GetData(1000).ToList();

        private readonly ClientSettingsModel OlapModel = new ClientSettingsModel
        {
            Settings = new Dictionary<string, object[]>
            {
                {"RowTotals", new object[] { ShowTotals.Subtotals, ShowTotals.None, ShowTotals.GrandTotals} },
                {"ColumnTotals", new object[] { ShowTotals.Subtotals, ShowTotals.None, ShowTotals.GrandTotals} },
                {"ShowZeros", new object[] { false, true } },
                { "AllowMerging", new object[] {
                    C1.Web.Mvc.Grid.AllowMerging.All,
                    C1.Web.Mvc.Grid.AllowMerging.AllHeaders,
                    C1.Web.Mvc.Grid.AllowMerging.Cells,
                    C1.Web.Mvc.Grid.AllowMerging.ColumnHeaders,
                    C1.Web.Mvc.Grid.AllowMerging.None,
                    C1.Web.Mvc.Grid.AllowMerging.RowHeaders
                } }
            }
        };

        // GET: PivotGrid
        public ActionResult Index()
        {
            OlapModel.ControlId = "indexPanel";
            ViewBag.DemoOptions = OlapModel;
            return View(Data);
        }
    }
}
@model IEnumerable<ProductData>
@{
    ClientSettingsModel optionsModel = ViewBag.DemoOptions;
}

<c1-pivot-engine id="indexEngine" show-row-totals="Subtotals" totals-before-data="true">
    <c1-items-source source-collection="Model"></c1-items-source>
    <c1-view-field-collection c1-property="RowFields" items="Country,Date"></c1-view-field-collection>    
    <c1-view-field-collection c1-property="ColumnFields" items="Product"></c1-view-field-collection>
    <c1-view-field-collection c1-property="ValueFields" items="Sales"></c1-view-field-collection>
</c1-pivot-engine>

<div class="row">
    <div class="col-sm-4 col-md-4">
        <c1-pivot-panel id="@(optionsModel.ControlId)" items-source-id="indexEngine"></c1-pivot-panel>
    </div>
    <div class="col-sm-8 col-md-8">
        <c1-pivot-grid id="indexGrid" items-source-id="indexEngine" outline-mode="false" show-value-field-headers="false"></c1-pivot-grid>
        <p>
            <span style="vertical-align:top; color:black;">
                OutlineMode&nbsp;<input id="outlineMode" type="checkbox" onchange="toggleOulineMode(event)" style="margin-right:5em;" />
                ShowValueFieldHeaders&nbsp;<input id="ShowValueFieldHeaders" type="checkbox" onchange="toggleShowValueFieldHeaders(event)" />
            </span>
        </p>
    </div>
</div>
<p>@Html.Raw(OlapRes.Index_Text0)</p>

<button type="button" class="btn btn-default" onclick="saveView()">@Html.Raw(OlapRes.Index_Text7)</button>
<button type="button" class="btn btn-default" onclick="loadView()">@Html.Raw(OlapRes.Index_Text8)</button>
<p></p>
<p>@Html.Raw(OlapRes.Index_Text2)</p>

<p>@Html.Raw(OlapRes.Index_Text3)</p>

<button type="button" class="btn btn-default"
        onclick="excelExport()">
    @Html.Raw(OlapRes.Index_Text9)
</button>
@section Scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script type="text/javascript">
        function saveView() {
            var ng = c1.getService('indexEngine');
            if (ng && ng.isViewDefined) {
                localStorage.viewDefinition = ng.viewDefinition;
            }
        }
        function loadView() {
            var ng = c1.getService('indexEngine');
            if (ng && localStorage.viewDefinition) {
                ng.viewDefinition = localStorage.viewDefinition;
                var cmbRowTotals = wijmo.Control.getControl('#RowTotals');
                if (cmbRowTotals) {
                    cmbRowTotals.selectedValue = ng.showRowTotals;
                }

                var cmbColTotals = wijmo.Control.getControl('#ColTotals');
                if (cmbColTotals) {
                    cmbColTotals.selectedValue = ng.showColumnTotals;
                }

                var chkShowZeros = document.getElementById('ColTotals');
                if (chkShowZeros) {
                    chkShowZeros.checked = ng.showZeros;
                }
            }
        }
        function excelExport() {
            var pivotGrid = wijmo.Control.getControl('#indexGrid');

            // create book with current view
            var book = wijmo.grid.xlsx.FlexGridXlsxConverter.save(pivotGrid, {
                includeColumnHeaders: true,
                includeRowHeaders: true
            });
            book.sheets[0].name = 'Main View';
            addTitleCell(book.sheets[0], getViewTitle(pivotGrid.engine));

            // add sheet with transposed view
            transposeView(pivotGrid.engine);
            var transposed = wijmo.grid.xlsx.FlexGridXlsxConverter.save(pivotGrid, {
                includeColumnHeaders: true,
                includeRowHeaders: true
            });
            transposed.sheets[0].name = 'Transposed View';
            addTitleCell(transposed.sheets[0], getViewTitle(pivotGrid.engine));
            book.sheets.push(transposed.sheets[0]);
            transposeView(pivotGrid.engine);

            // save the book
            book.save('wijmo.olap.xlsx');
        }

        // build a title for the current view
        function getViewTitle(ng) {
            var title = '';
            for (var i = 0; i < ng.valueFields.length; i++) {
                if (i > 0) title += ', ';
                title += ng.valueFields[i].header;
            }
            title += ' by ';
            if (ng.rowFields.length) {
                for (var i = 0; i < ng.rowFields.length; i++) {
                    if (i > 0) title += ', ';
                    title += ng.rowFields[i].header;
                }
            }
            if (ng.rowFields.length && ng.columnFields.length) {
                title += ' and by ';
            }
            if (ng.columnFields.length) {
                for (var i = 0; i < ng.columnFields.length; i++) {
                    if (i > 0) title += ', ';
                    title += ng.columnFields[i].header;
                }
            }
            return title;
        }

        function transposeView(ng) {
            ng.deferUpdate(function () {

                // save row/col fields
                var rows = [],
                    cols = [];
                for (var r = 0; r < ng.rowFields.length; r++) {
                    rows.push(ng.rowFields[r].header);
                }
                for (var c = 0; c < ng.columnFields.length; c++) {
                    cols.push(ng.columnFields[c].header);
                }

                // clear row/col fields
                ng.rowFields.clear();
                ng.columnFields.clear();

                // restore row/col fields in transposed order
                for (var r = 0; r < rows.length; r++) {
                    ng.columnFields.push(rows[r]);
                }
                for (var c = 0; c < cols.length; c++) {
                    ng.rowFields.push(cols[c]);
                }
            });
        }

        // adds a title cell into an xlsx sheet
        function addTitleCell(sheet, title) {

            // create cell
            var cell = new wijmo.xlsx.WorkbookCell();
            cell.value = title;
            cell.style = new wijmo.xlsx.WorkbookStyle();
            cell.style.font = new wijmo.xlsx.WorkbookFont();
            cell.style.font.bold = true;

            // create row to hold the cell
            var row = new wijmo.xlsx.WorkbookRow();
            row.cells[0] = cell;

            // and add the new row to the sheet
            sheet.rows.splice(0, 0, row);
        }

        // toggle outline mode      
        function toggleOulineMode(e) {
            var pivotGrid = wijmo.Control.getControl('#indexGrid');
            pivotGrid.outlineMode = e.target.checked;
        }
        // toggle ShowValueFieldHeaders   
        function toggleShowValueFieldHeaders(e) {
            var pivotGrid = wijmo.Control.getControl('#indexGrid');
            pivotGrid.showValueFieldHeaders = e.target.checked;
        }
    </script>
}
@section Settings{
    @Html.Partial("_OptionsMenu", optionsModel)
}
@section Description{
    <p>
        @Html.Raw(OlapRes.Index_Text4)<br />
        @Html.Raw(OlapRes.Index_Text10)
    </p>

    <p>@Html.Raw(OlapRes.Index_Text5)</p>

}
@section Summary{
    <p>@Html.Raw(OlapRes.Index_Text6)</p>

}