[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">

  <h1>セルを縦に結合</h1>
  <p>layoutDefinitionでrowspanプロパティを設定して、セルを縦に結合できるようになりました。</p>
  <input type="checkbox" id="isRowspan" onchange="update()">
  <label for="isRowspan">「数量」セルを縦に結合</label>
  <div id="multiRow"></div>

</div>

CSS

.highlight {
  background: lightgreen;
}

JavaScript

var layoutDefinitions = [
  [
    {
      cells: [
        { binding: 'No', header: 'No', width: 80 }
      ]
    },
    {
      colspan: 2, cells: [
        { binding: '商品名', header: '商品名', colspan: 2 },
        { binding: '分類名', header: '分類名' },
        { binding: '顧客名', header: '顧客名' },
        { binding: '受注日', header: '受注日', colspan: 2 }
      ]
    },
    {
      cells: [
        { binding: '数量', header: '数量', cssClass: 'highlight' },
        { binding: '金額', header: '金額', format: 'c' }
      ]
    }
  ],
  [
    {
      cells: [
        { binding: 'No', header: 'No', width: 80 }
      ]
    },
    {
      colspan: 2, cells: [
        { binding: '商品名', header: '商品名', colspan: 2 },
        { binding: '分類名', header: '分類名' },
        { binding: '顧客名', header: '顧客名' },
        { binding: '受注日', header: '受注日', colspan: 2 }
      ]
    },
    {
      cells: [
        { binding: '数量', header: '数量', rowspan: 2, cssClass: 'highlight' },
        { binding: '金額', header: '金額', format: 'c' }
      ]
    }
  ]
];

var multiRow = new wijmo.grid.multirow.MultiRow('#multiRow', {
  itemsSource: sample.ordersDetail(),
  layoutDefinition: layoutDefinitions[0]
});
function update() {
  multiRow.layoutDefinition = layoutDefinitions[document.getElementById('isRowspan').checked ? 1 : 0];
}