[MultiRow] 複数行のグループ行

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.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.multirow.min.js"></script>
<div class="container">

  <div id="multiRow"></div>

</div>

CSS

body {
  margin: 50px 0;
}

JavaScript

var cv = new wijmo.collections.CollectionView(sample.ordersDetail(10), {
  groupDescriptions: ['顧客名']
});
var multiRow = new wijmo.grid.multirow.MultiRow('#multiRow', {
  multiRowGroupHeaders: true,
  itemsSource: cv,
  layoutDefinition: [
    {
      cells: [
        { binding: 'No', width: 80 }
      ]
    },
    {
      colspan: 2, cells: [
        { binding: '顧客名' },
        { binding: '分類名' },
        { binding: '商品名', colspan: 2 },
      ]
    },
    {
      cells: [
        { binding: '数量', aggregate: 'Sum' },
        { binding: '金額', format: 'c', aggregate: 'Sum' }
      ]
    }
  ]
});
multiRow.collapseGroupsToLevel(0);