[OLAP] カスタム詳細画面

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.olap.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<link rel="stylesheet" href="https://demo.grapecity.com/wijmo/sample/styles/sample.css">
<div class="container">

  <h1>カスタム詳細画面</h1>
  <p>ピボットテーブルのセルをダブルクリックしたときに表示される、詳細画面をカスタマイズすることができます。</p>
  <p>次の例では、グリッドの上に表示される概要説明と、グリッドのソート順をカスタマイズしています。</p>
  <label><input id="customDetailDialog" type="checkbox" checked> カスタム詳細画面を表示</label><br>
  <div id="pivotGrid"></div>
  <div id="pivotChart"></div>

</div>

JavaScript

var engine = new wijmo.olap.PivotEngine({
  itemsSource: sample.ordersDetail(10000),
  fields: [
    { binding: '受注日', header: '受注日', format: 'EEEE年度' },
    { binding: '分類名', header: '分類名' },
    { binding: '数量', header: '数量' },
    { binding: '金額', header: '金額', format: 'c' },
  ],
  columnFields: ['受注日'],
  rowFields: ['分類名'],
  valueFields: ['金額'],
});
var pivotGrid = new wijmo.olap.PivotGrid('#pivotGrid', {
  itemsSource: engine
});

var detailDialog = pivotGrid.detailDialog;
var detailGrid = wijmo.Control.getControl(detailDialog.hostElement.querySelector('.wj-flexgrid'));
var customDetailDialog = document.getElementById('customDetailDialog');

// 詳細画面の表示内容をカスタマイズ
detailDialog.showing.addHandler(function(s, e) {
  if (!customDetailDialog.checked) return;

  // 概要を変更
  var summary = s.hostElement.querySelector('.wj-summary');
  summary.innerHTML = wijmo.format('{columnHeader}の{rowHeader}の{cellHeader} = {cellValue:c}', s);

  // グリッドのソートを指定
  var sds = detailGrid.collectionView.sortDescriptions;
  sds.push(new wijmo.collections.SortDescription('受注日', true));
});