[FlexGrid] CSV出力オプション

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

  <label><input type="checkbox" checked onchange="options ^= wijmo.grid.ClipStringOptions.QuoteAll">全ての値をダブルクォーテーションで囲む</label><br>
  <label><input type="checkbox" checked onchange="options ^= wijmo.grid.ClipStringOptions.Unformatted">書式設定された値を出力する</label><br>
  <label><input type="checkbox" onchange="options ^= wijmo.grid.ClipStringOptions.InvisibleRows">非表示の行を含める</label><br>
  <label><input type="checkbox" onchange="options ^= wijmo.grid.ClipStringOptions.InvisibleColumns">非表示の列を含める</label><br>
  <button id="exportCsv">CSVファイルを保存</button>
  <div id="flexGrid"></div>

</div>

CSS

body {
  margin: 50px 0;
}

JavaScript

var options = wijmo.grid.ClipStringOptions.CSV | wijmo.grid.ClipStringOptions.QuoteAll;
var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
  itemsSource: sample.orders(),
  columns: [
    { header: 'No', binding: 'No', width: 80 },
    { header: '商品名', binding: '商品名', width: 200 },
    { header: '受注日', binding: '受注日', width: 120 },
    { header: '金額', binding: '金額', format: 'c', width: 100 },
    { header: '値引', binding: '値引', width: 80 }
  ]
});
flexGrid.rows[0].visible = false;
flexGrid.columns[0].visible = false;

document.getElementById('exportCsv').addEventListener('click', function() {
  var csv = flexGrid.getClipString(new wijmo.grid.CellRange(0, 0, flexGrid.rows.length - 1, flexGrid.columns.length - 1), options, true);
  wijmo.saveFile(csv, 'FlexGrid.csv', 'text/csv');
});