デモ
クイックスタート

SpreadJSの使い方

SpreadJSは、Webアプリケーションで ExcelライクなUIを実現するJavaScriptライブラリです。表計算エンジン、並べ替え、フィルタリング、チャート、ピボットテーブル、Excel入出力など、Excelと互換性の高いさまざまな機能を利用できます。SpreadJSをプロジェクトに追加し、データと連結し、外観を整えるには、以下の手順に従います。

手順

  1. SpreadJSは他のライブラリに依存しません。必要なファイルは、gc.spread.sheets.xx.x.x.css、gc.spread.sheets.all.xx.x.x.min.js、gc.spread.sheets.resources.ja.xx.x.x.min.jsです。 
    < link rel="styleSheet" href="gc.spread.sheets.xx.x.x.css" />
< script src="gc.spread.sheets.all.xx.x.x.min.js" type="text/javascript" > < /script >
< script src="gc.spread.sheets.resources.ja.xx.x.x.min.js" type="text/javascript" > < /script >
  2. ページ本文に、コンテナとしてDOM要素を含めます。 
    < div id="ss" style="width:100%; height:360px;border: 1px solid gray;" > < /div >
  3. Spreadコンポーネントを初期化するには、次のように指定します。 new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }) 
    window.onload = function () {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
};

データの連結

この手順では、SpreadJSにデータを追加します。データソースに基づき、セルにデータが表示されます。

手順

  1. SpreadJSにはデータを簡単に追加できます。処理するシートを取得するには、getSheetメソッドを使用します。"new GC.Spread.Sheets.Bindings.CellBindingSource(person);"を使用して、セル連結ソースを設定します。次に、setBindPathメソッドを使用して、指定のシート領域の指定のセルに対し、連結パスを設定します。最後にsetDataSourceメソッドを使用して、シートのデータソースを設定します。 
    var sheet = spread.getSheet(0);
var person = { name: 'Peter Winston', age: 25, gender: 'Male', address: { postcode: '10001' } };
var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
sheet.setBindingPath(2, 2, 'name');
sheet.setBindingPath(3, 2, 'age');
sheet.setBindingPath(4, 2, 'gender');
sheet.setBindingPath(5, 2, 'address.postcode');
sheet.setDataSource(source);

スタイルの設定

初期化操作とデータ連結が完了すると、SpreadJSにデータが表示されます。この手順では、魅力的で標準的な外観の個人カードになるように、シートのスタイルを設定します。

手順

  1. 前セクションで作成した個々のデータ項目に、スタイルを設定します。これにより、データがより見やすく、使いやすくなります。SpreadJSに「個人カード」というタイトルを追加し、addSpanメソッドを使用して、セルを拡張します。指定の列の幅を変更します。背景色、テキスト色、罫線、水平方向の配置など、個人カードの各種スタイルを追加します。 
    sheet.getCell(2,1).text("Name");
sheet.getCell(3,1).text("Age");
sheet.getCell(4,1).text("Gender");
sheet.getCell(5,1).text("Address.Postcode");
sheet.addSpan(1, 1, 1, 2);
sheet.getRange(1, 1, 1, 2).text("Card")
sheet.setColumnWidth(1, 120);
sheet.setColumnWidth(2, 120);
sheet.getRange(1, 1, 1, 2).backColor("rgb(20, 140, 1218)")
sheet.getRange(2, 1, 4, 1).backColor("rgb(169, 238, 243)")
sheet.getRange(2, 2, 4, 1).backColor("rgb(247, 197, 113)")
sheet.getRange(1, 1, 5, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
    all: true
});
sheet.getRange(2, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
    inside: true
});
sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);