[FlexGrid] 複数のセル範囲を選択

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

  <p>Ctrlキーを押しながらセルをドラッグ／クリックすると、複数のセル範囲を選択できます。</p>
  <label><input type="checkbox" onchange="flexGrid.selectionMode = this.checked ? wijmo.grid.SelectionMode.MultiRange : wijmo.grid.SelectionMode.CellRange">複数のセル範囲を選択</label><br>
  <div id="flexGrid"></div>
  選択されたセル範囲
  <ul id="selectedRanges"></ul>

</div>

CSS

body {
  margin: 50px 0;
}

JavaScript

var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
  itemsSource: sample.orders(),
  autoGenerateColumns: false,
  columns: [
    { header: 'No', binding: 'No' },
    { header: '商品名', binding: '商品名', width: 200 },
    { header: '受注日', binding: '受注日' },
    { header: '金額', binding: '金額', format: 'c' },
    { header: '値引', binding: '値引' }
  ],
  selectionChanged: function (s, e) {
    var selectedRanges = document.getElementById("selectedRanges");
    selectedRanges.innerHTML = '';
    for (var i = 0; i < s.selectedRanges.length; i++) {
      var li = document.createElement('li');
      li.innerText = wijmo.format('({row}, {col}) - ({row2}, {col2})', s.selectedRanges[i]);
      selectedRanges.appendChild(li);
    }
  }
});