6.1.1. Spread.Sheets¶

ここでは Spread.Sheets を組み込んだ画面の基本的な開発方法を説明します。

コラム

Spread.Sheetsの操作方法はSpreadJSに準拠します。詳しくは、SpreadJS Spread.Sheets の製品ヘルプを参照してください。

項目

Spread.Sheetsの読み込み
Spread.Sheetsの初期化
JSONによる初期化と保存
データバインディング
テーマの適用
プラグインの利用

6.1.1.1. Spread.Sheetsの読み込み ¶

Spread.Sheets を利用する場合は、以下のタグを使用します。

スクリプト開発モデルの場合
IMARTタグ「spreadsheet」タグを使用します。タグについては spreadsheetタグ を参照してください。
<imart type="spreadsheet" />
JavaEE開発モデルの場合
IM-Spreadsheet タグライブラリ「spreadsheet」タグを使用します。タグについては spreadsheetタグ を参照してください。
<imspreadsheet:spreadsheet />

6.1.1.2. Spread.Sheetsの初期化 ¶

Spreadコンポーネントの初期化は new GC.Spread.Sheets.Workbook で行われます。

<script type="javascript">
  jQuery(function($) {
    var workbook = new GC.Spread.Sheets.Workbook($('#spreadsheet')[0], {sheetCount: 1});
  });
</script>

6.1.1.3. JSONによる初期化と保存 ¶

Spread.Sheetsは、JSONへのシリアル化および逆シリアル化をサポートします。

JSONオブジェクトを取得するにはSpreadのtoJSONを使用します。

var json = $('#spreadsheet').data('workbook').toJSON();
var jsonObject = JSON.stringify(json);

またJSONオブジェクトからSpreadを初期化するにはfromJSONを使用します。

var workbook = new GC.Spread.Sheets.Workbook($('#spreadsheet')[0], {sheetCount: 1});
workbook.fromJSON(json);

6.1.1.4. データバインディング ¶

Spread.Sheetsにデータを連結して表示することもできます。

データの連結にはシートレベルで連結する方法とセルレベルで連結する方法があります。

シートレベルバインディング

シートレベルでデータを設定する場合はsetDataSourceメソッドを使用します。

var customers = [
    { ID:0, Name:'A', Info1:'Info0' },
    { ID:1, Name:'B', Info1:'Info1' },
    { ID:2, Name:'C', Info1:'Info2' }
];
var workbook = new GC.Spread.Sheets.Workbook($('#spreadsheet')[0], {sheetCount: 1});
var sheet = workbook.getActiveSheet();
sheet.autoGenerateColumns = true;
sheet.setDataSource(customers);

セルレベルバインディング

セルレベルでデータを設定する場合はCellBindingSourceを使用して連結ソースを作成し、setBindingPathメソッドで連結パスを設定します。

var person = { name: 'Wang feng', age: 25, sex: 'male', address: { postcode: '710075' } };
var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);

var workbook = new GC.Spread.Sheets.Workbook($('#spreadsheet')[0], {sheetCount: 1});
var sheet = workbook.getActiveSheet();
sheet.setBindingPath(0, 1, 'name');
sheet.setBindingPath(1, 1, 'age');
sheet.setBindingPath(2, 1, 'sex');
sheet.setBindingPath(3, 1, 'address.postcode');
sheet.setDataSource(source);

6.1.1.5. テーマの適用 ¶

Spread.Sheets ではSpreadにテーマを適用できます。
テーマを適用するには spreadsheet タグの属性 theme を指定します。
theme属性の指定がない場合は、Excel 2007スタイルが適用されます。

スクリプト開発モデルの場合
<imart type="spreadsheet" theme="excel2016colorful" />
JavaEE開発モデルの場合
<imspreadsheet:spreadsheet theme="excel2016colorful" />

標準のテーマパターンには以下のパターンが用意されています。

Excel 2007スタイル

Excel 2013 Whiteスタイル

Excel 2013 Light Grayスタイル

Excel 2013 Dark Grayスタイル

Excel 2016 Colorfulスタイル

Excel 2016 Dark Grayスタイル

Excel 2016 Blackスタイル

6.1.1.6. プラグインの利用 ¶

Spread.Sheets ではプラグインを追加することでSpreadに機能を追加できます。

Spreadに印刷機能を付ける場合等に利用します。

スクリプト開発モデルの場合
<imart type="spreadsheet" plugins="sheets.print" />
JavaEE開発モデルの場合
<imspreadsheet:spreadsheet plugins="sheets.print" />

以下は印刷機能を追加した例です。

<imart type="head">
  <imart type="spreadsheet" plugins="sheets.print" />
  <script type="text/javascript">
    jQuery(function($) {
      var workbook = new GC.Spread.Sheets.Workbook($('#spreadsheet')[0], {sheetCount: 1});
      $('#print').click(function() {
        workbook.print();
      });
    });
  </script>
</imart>
<div class="imui-title-small-window">
  <h1>Spread印刷サンプル</h1>
</div>
<div class="imui-toolbar-wrap">
  <div class="imui-toolbar-inner">
    <ul class="imui-list-toolbar">
      <li>
        <a href="javascript: void(0);" id="print" class="imui-toolbar-icon">印刷</a>
      </li>
    </ul>
  </div>
</div>
<div id="spreadsheet" style="width:100%;height:100vh;"></div>

目次

6.1.1. Spread.Sheets¶

6.1.1.1. Spread.Sheetsの読み込み ¶

6.1.1.2. Spread.Sheetsの初期化 ¶

6.1.1.3. JSONによる初期化と保存 ¶

6.1.1.4. データバインディング ¶

6.1.1.5. テーマの適用 ¶

6.1.1.6. プラグインの利用 ¶

目次