データ連結

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

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

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

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

//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：指定されたデータソースを使用してテーブルを追加する

loadTable関数を作成し、suspendPaintメソッドとresumePaintメソッド（ベストプラクティスに従う）を呼び出して、アクティブスプレッドシートを取得します。

//2.1: データを使用してテーブルを作成します。
       function loadTable(ss, data) {
    // suspendPaintを使用してすべての変更を一度に再描画します。
       ss.suspendPaint;
       try {
        // アクティブスプレッドシートを取得します。
        var sheet = ss.getActiveSheet;
          } catch (e) {
        alert(e.message);
       }
      // Resumepaintを使用してスプレッドインスタンス全体を一度にすべての変更で再描画します。
      ss.resumePaint;
    }

loadTable 関数内に addFromDataSource メソッドを使用して、アクティブシートに指定されたデータソースを持つ範囲テーブルを追加します。

//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：テーブルのスタイルを設定する

hyperlightFirstColumn メソッドと showHeader メソッドをTrueに設定して、テーブルのスタイルを変更します。
setColumnWidth メソッドを使用して列の幅を設定します。

//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インスタンスを更新する

refresh 関数を作成して、SpreadJSインスタンスを更新し、 reset メソッドを使用した変更を削除します。この関数は、データをロードし、 loadTable(ss, data) 関数を使用してテーブルを追加します。

//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);
}

スプレッドコンポーネントを初期化するときに、 refresh 関数を呼び出します。

 $(document).ready(function () {
    // Spreadを初期化します。
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{ sheetCount: 1 });
    // refresh機能を呼び出します。
    refresh();
});

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