FlexGridパフォーマンス計測

by spradjs samples

HTML

<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/cultures/wijmo.culture.ja.min.js"></script>
<div class="container">
  <div>
    <label for="rows">行数</label>
    <select id="rows" onchange="rowsChanged()">
      <option>10000</option>
      <option>100000</option>
      <option>500000</option>
    </select>&emsp;&emsp;
  </div>
</div>
<div class="container">
  <div>
    <button onclick="createData()">データ作成</button><br>
    <span id="createData">&nbsp;</span>
  </div>
  <div>
    <button onclick="setData()">データ設定</button><br>
    <span id="setData"></span>
  </div>
  <div>
    <button onclick="applyFilter()">フィルター</button><br>
    <span id="applyFilter"></span>
  </div>
</div>
<div class="container">
  <div>
    <button onclick="sort()">ソート</button><br>
    <span id="sort"></span>
  </div>
  <div>
    <button onclick="unbound()">非連結</button><br>
    <span id="unbound"></span>
  </div>
  <div>
    <button onclick="wijmo.Clipboard.copy(time.toString())">結果をコピー</button>
  </div>
</div>
<div id="flexGrid"></div>

CSS

#flexGrid {
  width: 618px;
  height: 300px;
}

body {
  font-size: 14px;
  background-color: #eae8da;
}

.container {
  display: flex;
}

.container div {
  min-width: 80px;
}

button {
  width: 100px;
}

JavaScript

// 初期化
var time, items, rows,
  flexGrid = new wijmo.grid.FlexGrid('#flexGrid'),
  filter = new wijmo.grid.filter.FlexGridFilter(flexGrid);
flexGrid.columns.defaultSize = 100;
rowsChanged();
createData();
setData();
document.getElementById("createData").innerText = "-";
document.getElementById("setData").innerText = "-";
document.getElementById("applyFilter").innerText = "-";
document.getElementById("sort").innerText = "-";
document.getElementById("unbound").innerText = "-";


// 行数／列数を変更
function rowsChanged() {
  rows = Number(document.getElementById('rows').value);
}
// データを作成
function createData() {
  timeStart();
  items = [];
  for (var r = 1; r <= rows; r++) {
    items.push({
      ID: r,
      列1: r + ', ' + 1,
      列2: r + ', ' + 2,
      列3: r + ', ' + 3,
      列4: r + ', ' + 4,
      列5: r + ', ' + 5,
      列6: r + ', ' + 6,
      列7: r + ', ' + 7,
      列8: r + ', ' + 8,
      列9: r + ', ' + 9,
      列10: r + ', ' + 10,
      列11: r + ', ' + 11,
      列12: r + ', ' + 12,
      列13: r + ', ' + 13,
      列14: r + ', ' + 14,
      列15: r + ', ' + 15,
      列16: r + ', ' + 16,
      列17: r + ', ' + 17,
      列18: r + ', ' + 18,
      列19: r + ', ' + 19,
      列20: r + ', ' + 20,
      列21: r + ', ' + 21,
      列22: r + ', ' + 22,
      列23: r + ', ' + 23,
      列24: r + ', ' + 24,
      列25: r + ', ' + 25,
      列26: r + ', ' + 26,
      列27: r + ', ' + 27,
      列28: r + ', ' + 28,
      列29: r + ', ' + 29,
      列30: r + ', ' + 30,
      列31: r + ', ' + 31,
      列32: r + ', ' + 32,
      列33: r + ', ' + 33,
      列34: r + ', ' + 34,
      列35: r + ', ' + 35,
      列36: r + ', ' + 36,
      列37: r + ', ' + 37,
      列38: r + ', ' + 38,
      列39: r + ', ' + 39,
      列40: r + ', ' + 40,
      列41: r + ', ' + 41,
      列42: r + ', ' + 42,
      列43: r + ', ' + 43,
      列44: r + ', ' + 44,
      列45: r + ', ' + 45,
      列46: r + ', ' + 46,
      列47: r + ', ' + 47,
      列48: r + ', ' + 48,
      列49: r + ', ' + 49,
      列50: r + ', ' + 50,
     ...