SpreadJS製品ヘルプ
テーブルシートの作成
機能 > テーブルシート > テーブルシートの作成

本トピックでは、スプレッドシートにテーブルシートを作成する方法について説明します。

ユースケース

例として、バックエンドのデータベースから、大量の顧客データを取得するシステムがあるとします。このような場合、テーブルシートを使用して膨大な量のデータを表示および管理できます。また、ユーザーの操作で、ソート、フィルタリング、およびグループ化を使用して、データの分析を実行できます。

 

テーブルシートを作成するには、次の手順を実行します。

  1. Workbook.addSheetTabメソッドでSheetType 「tablesheet」のシートを追加して、テーブルシートを初期化します。
    JavaScript
    コードのコピー 
    // テーブルシートを初期化します。 
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);

  2. DataManagerメソッドを使用してデータマネジャーを初期化します。
    JavaScript
    コードのコピー 
    // データマネージャーを初期化します。
var dataManager = spread.dataManager();

  3. addTableメソッドを使用して、データマネジャーにテーブルを追加します。 このメソッドは、文字列としてテーブル名、IDataSourceOptionインタフェースのオプションを受け入れます。

    IDataSourceOptionインタフェースを使用すると、2種類のデータソースを設定できます。

    • data - JSONのオブジェクト配列、CSVまたはXMLの文字列である可能性のあるローカルデータソース。
    • remote - REST API、OData、GraphQLに対応するリモートデータソース。

    データの操作の詳細については、「データ操作」トピックを参照してください。

    JavaScript
    コードのコピー 
    // データマネージャーにテーブルを追加します。
var myTable = dataManager.addTable("myTable", {
    remote: {
        read: {
            url: 'https://demodata.grapecity.com/wwi/api/v1/customers'
        }
    }
});

  4. addViewメソッドを使用してデータマネジャーのテーブルにビューを追加し、列情報を定義します。

    デフォルトでは、ビューにはすべてのデフォルト列が含まれます。 列のプロパティやその他のビューオプションの詳細については、「テーブルシートビュー」を参照してください。

    JavaScript
    コードのコピー 
    // ビューには、テーブルのすべてのデフォルト列があります。
var view = myTable.addView("myView");

  5. データマネジャーテーブルのfetchメソッドを使用してビューを取得し、setDataViewメソッドを使用してテーブルシートに連結します。

    fetchメソッドは、テーブルとビューで実行して、それぞれのデータを返すことができます。

    JavaScript
    コードのコピー 
    // テーブルシートにビューを連結します。 
myTable.fetch().then(function () {
    var view = myTable.addView("myView");
    sheet.setDataView(view);
});

 

 

Copyright © 2016 GrapeCity inc. All rights reserved.