SpreadJS JavaScript コンポーネントの使い方

わずか数行のコードで、Excelライクなスプレッドシートをアプリケーションに組み込むことができます。以下に、JavaScriptアプリケーションの作成とSpreadJSの初期化の手順を示します。

手順

  1. JavaScriptアプリケーションを作成します。 - 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.
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="spreadjs culture" content="ja-jp"/>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="gc.spread.sheets.xx.x.x.css"type="text/css"/>
        <script src="gc.spread.sheets.all.xx.x.x.min.js">
        <script src="gc.spread.sheets.resources.ja.xx.x.x.min.js">
    </head>
    
    <body></body>
    <script></script>
    </html>
  2. SpreadJSのホスト要素を追加します。 - ホストとなるDOM要素をSpreadJSのコンテナとしてページのBodyタグ内に含めます。
    <div id="ss"></div>
  3. SpreadJSコンポーネントを初期化します。 - ホストとなるDOM要素でSpreadJSを初期化するコードをページのScriptタグに追加します。SpreadJSは "new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 })" で初期化されます。
    window.onload = function () {
        // SpreadJSを初期化します。
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
        // SpreadJSオブジェクトを取得します。
        // var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    };

値と数式の設定

手順

  1. setValueメソッドを使用してセルの値を設定します。また、setFormulaメソッドで計算式を作成します。
    var sheet = spread.getSheet(0);
    // テキストを設定します。
    sheet.setText(0,0,"This is a text");
    // 数値を設定します。 
    sheet.setValue(1, 0, 2245);
    sheet.setValue(2, 0, 2245);
    // 日付型の値を設定します。
    sheet.setValue(3, 0, new Date(2020, 10, 7).toLocaleDateString('en-US');
    sheet.getRange(3, 0, 1, 1).formatter("mm-dd-yyyy");
    
    // 数式を設定します。(A2とA3セルの合計を計算します。)
    sheet.setFormula(3, 3, '=SUM(A2:A3)');
    

スタイルの設定

以下の機能を使って、データをより分かりやすく表現しましょう。

手順

  1. このステップでは、シートのスタイルを設定してデータを見やすく表現します。
    // スタイルを設定します。
    sheet.setColumnWidth(1, 200);
    sheet.setColumnWidth(2, 200);
    sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
    sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
    sheet.addSpan(1, 1, 1, 2);
    sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
        all: true
    });
    sheet.getRange(2, 1, 3, 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);

データ連結

以下のように、データを簡単かつ効率的に連結することができます。

手順

  1. getSheet メソッドを使用して、データ連結を設定するシートを取得します。
  2. セルに連結するデータソースを "new GC.Spread.Sheets.Bindings.CellBindingSource(person); "で作成します。
  3. setBindPath メソッドを使用して、指定されたシート領域の指定されたセルのバインディングパスを設定します。
  4. 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);