SpreadJS製品ヘルプ
データ連結
はじめに > クイックスタート > データ連結

次のセクションは、データソースからテーブルにデータをロードするための詳細な手順について説明します。

「クイックスタート」のHTMLページの作成の手順で作成したページに、以下の手順でスクリプトを追加していきます。

手順1：データソースのサンプルデータを作成する

学生のレポートカードのデータを含むcreateSampleData関数を作成します。

JavaScript
コードのコピー 
//1:- createSampleData()を作成します。
function createSampleData() {
    // サンプルレポートカードを作成します。
    return [
        {
             コース : "微積分",
            学期: 1,
            単位 : 5,
            得点: 80,
            先生: "Nancy.Feehafer",
        },
        {
             コース : "体育",
            学期: 1,
            単位 : 3.5,
            得点: 85,
            先生: "Andrew.Cencini",
        },
        {
             コース : "政治経済学 ",
            学期: 1,
            単位 : 3.5,
            得点: 95,
            先生: "Jan.Kotas",
        },
        {
             コース : "コンピュータの基礎",
            学期: 1,
            単位 : 2,
            得点: 85,
            先生: "Steven.Thorpe",
        },
        {
             コース : "ミクロ経済学",
            学期: 1,
            単位 : 4,
            得点: 62,
            先生: "Jan.Kotas",
        },
        {
             コース : "線形代数学",
            学期: 2,
            単位 : 5,
            得点: 73,
            先生: "Nancy.Feehafer",
        },
        {
             コース : "会計学",
            学期: 2,
            単位 : 3.5,
            得点: 86,
            先生: "Nancy.Feehafer",
        },
        {
             コース : "統計学",
            学期: 2,
            単位 : 5,
            得点: 85,
            先生: "Robert.Zare",
        },
        {
             コース : "マーケティング",
            学期: 2,
            単位 : 4,
            得点: 70,
            先生: "Laura.Giussani",
        },
    ];
}

手順2：指定されたデータソースを使用してテーブルを追加する

  1. loadTable関数を作成し、suspendPaintメソッドとresumePaintメソッド（ベストプラクティスに従う）を呼び出して、アクティブスプレッドシートを取得します。
    JavaScript
    コードのコピー 
     //2.1: データを使用してテーブルを作成します。
       function loadTable(ss, data) {
    // suspendPaintを使用してすべての変更を一度に再描画します。
       ss.suspendPaint;
       try {
        // アクティブスプレッドシートを取得します。
        var sheet = ss.getActiveSheet;
          } catch (e) {
        alert(e.message);
       }
      // Resumepaintを使用してスプレッドインスタンス全体を一度にすべての変更で再描画します。
      ss.resumePaint;
    }

  2. loadTable関数内にaddFromDataSourceメソッドを使用して、アクティブシートに指定されたデータソースを持つ範囲テーブルを追加します。
    JavaScript
    コードのコピー 
        //2.1: データを使用してテーブルを作成します。
    function loadTable(ss, data) {
      ss.suspendPaint;
      try {
        var sheet = ss.getActiveSheet;
        //2.2: 指定されたデータソースで範囲テーブルを追加します。
        var table = sheet.tables.addFromDataSource(
          "Table1",
          0,
          0,
          data,
          GC.Spread.Sheets.Tables.TableThemes.medium2
        );
       } catch (e) {
        alert(e.message);
      }
      ss.resumePaint;
    }

手順3：テーブルのスタイルを設定する

  1. hyperlightFirstColumnメソッドとshowHeaderメソッドをTrueに設定して、テーブルのスタイルを変更します。
  2. setColumnWidthメソッドを使用して列の幅を設定します。
    JavaScript
    コードのコピー 
    //2: データを使用してテーブルを作成します。
//3: テーブルスタイルを設定します。
    function loadTable(ss, data) {
      // suspendPaintを使用してすべての変更を一度に再描画します。
      ss.suspendPaint();
      try {
        // アクティブスプレッドシートを取得します。
        var sheet = ss.getActiveSheet();
 
        // 指定されたデータソースで範囲テーブルを追加します。      
        var table = sheet.tables.addFromDataSource(
          "Table1",
          0,
          0,
          data,
          GC.Spread.Sheets.Tables.TableThemes.medium2
        );
        // 3.1) ヘッダを表示します。
        table.showHeader(true);
        
        // 3.1) 最初の列を強調表示します。
        table.highlightFirstColumn(true);
 
        // 3.2) 列の幅を設定します。
        sheet.setColumnWidth(0, 130);
        sheet.setColumnWidth(1, 130);
        sheet.setColumnWidth(2, 70);
        sheet.setColumnWidth(3, 70);
        sheet.setColumnWidth(4, 100);
        sheet.setColumnWidth(5, 260);
 
      } catch (e) {
        alert(e.message);
      }
      // Resumepaintを使用してスプレッドインスタンス全体を一度にすべての変更で再描画します。
      ss.resumePaint();
    }

手順4：SpreadJSインスタンスを更新する

  1. refresh関数を作成して、SpreadJSインスタンスを更新し、resetメソッドを使用した変更を削除します。この関数は、データをロードし、loadTable(ss, data)関数を使用してテーブルを追加します。
    JavaScript
    コードのコピー 
    //4:- refresh関数を作成します。
function refresh() {
    var ss = GC.Spread.Sheets.findControl(document.getElementById("ss"));
    // activesheetを取得します。
    var sheet = ss.getActiveSheet();
    // シートをリセットし、列数を設定します。
    sheet.reset();
    sheet.setColumnCount(7);
    // サンプルデータを使用して、テーブルをSpreadインスタンスにロードします。
    var data = createSampleData();
    loadTable(ss, data);
}

  2. スプレッドコンポーネントを初期化するときに、refresh関数を呼び出します。
    JavaScript
    コードのコピー 
    $(document).ready(function () {
    // Spreadを初期化します。
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{ sheetCount: 1 });
    // refresh機能を呼び出します。
    refresh();
});

上記の手順に従うと、以下のような出力が生成されます。

 

 

 

Copyright © 2016 GrapeCity inc. All rights reserved.