オブジェクトデータの変換

データソースにオブジェクト型のデータがある場合、テーブルシートは、デフォルトではオブジェクト型のデータを１つのフィールドのデータとして表示するビューを作成します。SpreadJSを使用すると、オブジェクトの各プロパティを、テーブルシートのフィールドに変換して表示することができます。オブジェクトのデータをフィールドに変換してテーブルシートに展開するには、データソーススキーマを定義します。

データソーススキーマの定義で、オブジェクトのフィールドに対してspreadプロパティを設定することで、オブジェクトのプロパティをテーブルシートのフィールドに展開することができます。このようにオブジェクトの各データをテーブルシートに直接展開して表示すると、データの可読性を高めることができます。

次のサンプルコードは、データソースを定義する方法を示します。

{
"records": [{
      "customerKey": 0,
      "customer": "Unknown",
      "fields": {
          "billToCustomer": "N/A",
          "category": "N/A",
          "buyingGroup": "N/A",
          "primaryContact": "N/A",
          "postalCode": "N/A",
          "validFrom": "2013-01-01T00:00:00",
          "validTo": "9999-12-31T23:59:59.9999999"
      }
  }, {
      "customerKey": 1,
      "customer": "Tailspin Toys (Head Office)",
      "fields": {
          "billToCustomer": "Tailspin Toys (Head Office)",
          "category": "Novelty Shop",
          "buyingGroup": "Tailspin Toys",
          "primaryContact": "Waldemar Fisar",
          "postalCode": "90410",
          "validFrom": "2013-01-01T00:00:00",
          "validTo": "9999-12-31T23:59:59.9999999"
      }
  },

次のサンプルコードは、スキーマの列を定義するときに列フィールドの spread プロパティを true に設定する方法を示します。

// データソーススキーマ
schema: {
    dataPath: 'records',
    columns: {
        fields: {
            spread: true
        }
    }
}

次のように、spreadプロパティを設定する場合のテーブルシートビューを示しています。

説明	画像
spreadプロパティをtrueに設定した場合
spreadプロパティをfalseに設定した場合

ドット区切り文字の使用

SpreadJSでは、spread プロパティの代わりにドット区切り文字を使用することもできます。ビューをテーブルシートにバインドするときにドット区切り文字を使用できます。

次のサンプルコードは、ビューをテーブルシートにバインドするドット区切り文字を使用する方法を示します。

// ビューをテーブルシートにバインドします。
 customerTable.fetch().then(function (data) 
 { 
     var view = customerTable.addView("myView", 
       [ 
          "customerKey", 
          "customer", 
          "fields.billToCustomer", 
          "fields.category", 
          "fields.postalCode", 
          "fields.validTo" 
     ], 
     undefined, 
      { 
       defaultColumnWidth: "*" 
      }); 
// ビューにはテーブルのデフォルトの列がすべて含まれています。
sheet.setDataView(view); 
});