初期化
SpreadJSを使用する最初のステップは、ワークブックオブジェクトをWebページに追加し、インスタンス変数を取得することです。このインスタンス変数を使用してコントロールのスタイルなどをカスタマイズしたり、ロードされたワークブックのコンテンツを動的に変更することができます。
説明
app.js
index.html
styles.css
SpreadJSの使用には以下のファイルが必要です。
- gc.spread.sheets.xx.x.x.css
- gc.spread.sheets.all.xx.x.x.min.js
ドキュメントのheadセクションにgc.spread.sheets.xx.x.x.css、gc.spread.sheets.all.xx.x.x.min.jsファイルを含め、これらの相対パスを指定します。次に、例を示します。
<!DOCTYPE html>
<html>
<head>
<link href='gc.spread.sheets.xx.x.x.css' rel='stylesheet' type='text/css'/>
<script src='gc.spread.sheets.all.xx.x.x.min.js' type='text/javascript'></script>
<script type='text/javascript' charset='utf-8'>
...
</script>
</head>
<body>
<div id='ss' style='width:100%; height:400px;'></div>
</body>
</html>
SpreadJSコンポーネントの初期化はnew GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 })で行われます。これで、idが「ss」のdivにspread（Spread.Sheetsコンポーネント）が追加されます。spreadオブジェクトを取得するには、var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'))と指定します。次に、例を示します。
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// スプレッドオブジェクトを取得する。
// var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
};
SpreadJSをjQueryと一緒に使用することもできます。次に、例を示します。
$(document).ready(function () {
var spread = new GC.Spread.Sheets.Workbook($('#ss')[0], { sheetCount: 1 });
// スプレッドオブジェクトを取得する。
// var spread = $('#ss').data('workbook');
});