[FlexSheet] オートフィル

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.grid.sheet.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>
  <div id="flexSheet"></div>

</div>

CSS

#flexSheet {
  height: 400px;
}

JavaScript

var data = [];
for (var i = 1; i <= 3; i++) {
  data.push({
    数値: i,
    偶数: i * 2,
    文字列: i % 2 ? 'Wijmo' : 'FlexSheet'
  });
}
var flexSheet = new wijmo.grid.sheet.FlexSheet('#flexSheet');
flexSheet.addBoundSheet('シート1', data);
flexSheet.insertRows(data.length, 10);
flexSheet.applyCellsStyle({backgroundColor: 'pink'}, [new wijmo.grid.CellRange(1, 0, 1, 2)]);