Spreadを使い始める

Spread.Sheetsは、SpreadJS製品ファミリを構成するスプレッドシートコンポーネントです。数式エンジン、並べ替え、フィルタリング、入力制御、スパークライン、ネイティブExcel入出力など、広く使用される多数の機能を利用できます。Spreadをプロジェクトに追加し、データと連結し、外観を整えるには、以下の手順に従います。

手順

  1. Spread.Sheetsは他のライブラリに依存しません。必要なファイルは、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 >
  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 });
    };

データの連結

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

手順

  1. Spread.Sheetsにはデータを簡単に追加できます。処理するシートを取得するには、getSheetメソッドを使用します。"new GC.Spread.Sheets.Bindings.CellBindingSource(person);"を使用して、セル連結ソースを設定します。次に、setBindPathメソッドを使用して、指定のシート領域の指定のセルに対し、連結パスを設定します。最後にsetDataSourceメソッドを使用して、シートのデータソースを設定します。
    var sheet = spread.getSheet(0);
    var person = { name: 'Wang feng', age: 25, gender: 'Male', address: { postcode: '710075' } };
    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);
                                

スタイルの設定

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

手順

  1. 前セクションで作成した個々のデータ項目に、スタイルを設定します。これにより、データがより見やすく、使いやすくなります。Spread.Sheetsに「個人カード」というタイトルを追加し、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("Person 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);