[FlexSheet] テーブル

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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/cultures/wijmo.culture.ja.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://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.xlsx.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.xlsx.min.js"></script>
<script src="https://cdn.grapecity.com/samples/wijmo/jp/scripts/sample.js"></script>
<button class="btn btn-default" onclick="saveExcel()">Excelファイルを保存</button>
<div id="flexSheet"></div>

CSS

#flexSheet {
  height: 250px;
}

JavaScript

var flexSheet = new wijmo.grid.sheet.FlexSheet('#flexSheet');
flexSheet.addUnboundSheet('受注リスト');
flexSheet.sheets[0].grid.columns[1].width = 200;

// テーブルを追加します。
flexSheet.sheets[0].addTableFromArray(0, 0, sample.orders(), null, 'Table1', flexSheet.getBuiltInTableStyle('TableStyleMedium4'));

function saveExcel() {
  flexSheet.save('FlexSheet.xlsx');
}