[OLAP] グループのアウトライン表示

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<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/cultures/wijmo.culture.ja.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>
<div class="container">

  <h1>グループのアウトライン表示</h1>
  <p>PivotGrid.outlineModeプロパティが追加され、行のグループをアウトライン形式で表示して、よりコンパクトなサイズで表示できるようになりました。</p>
  <input type="checkbox" id="outlineMode" onchange="update()">
  <label for="outlineMode">グループのアウトライン表示</label><br>
  <input type="checkbox" id="totalsBeforeData" onchange="update()">
  <label for="totalsBeforeData">合計をデータの前に表示</label><br>
  <div id="pivotGrid"></div>

</div>

JavaScript

var engine = new wijmo.olap.PivotEngine({
  itemsSource: sample.ordersDetail(10000),
  fields: [
    { binding: '分類名', header: '分類名' },
    { binding: '商品名', header: '商品名', width: 200 },
    { binding: '金額', header: '金額' },
  ],
  rowFields: ['分類名', '商品名'],
  valueFields: ['金額'],
  showRowTotals: 'Subtotals',
});
var pivotGrid = new wijmo.olap.PivotGrid('#pivotGrid', {
  itemsSource: engine
});
function update() {
  pivotGrid.outlineMode = document.getElementById('outlineMode').checked;
  engine.totalsBeforeData = document.getElementById('totalsBeforeData').checked;
}