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

  <div id="flexGrid"></div>

</div>

CSS

body {
  margin: 50px 0;
}
.negative {
  color: red;
}
.positive {
  color: blue;
}

JavaScript

var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
  itemsSource: createData(),
  columns: [
    { header: '年度', binding: 'year', width: 100 },
    { header: '売上', binding: 'sales', format: 'c', width: 120 },
    { header: '支出', binding: 'expenses', format: 'c', width: 120 },
    { header: '利益', isReadOnly: true, align: 'right', width: 120, cellTemplate: '<span class=${item.sales < item.expenses ? "negative" : "positive"}>${item.sales - item.expenses}:c</span>' }
  ]
});

function createData() {
  var items = [];
  for (var y = 2014; y < 2020; y++) {
    items.push({ year: y + '年度', sales: sample.random(100000000, 50000000), expenses: sample.random(100000000, 50000000)});
  }
  return items;
}