テーブルシートのリレーション

テーブルシートでは、リレーションを作成することで1つのビューにて複数のデータテーブルを連結できます。

上記のフローチャートで示されているように、テーブルシートのリレーションは関連テーブルと関連フィールドを定義し、主キーと外部キーのリレーションを使用することでテーブル構造で広く使用できます。リレーションの両方のデータテーブルは、データマネジャーで双方向バインディングとして機能し、両方のテーブルのすべてのプロパティにアクセスできます。

次の手順は、「Customers」と「Sales」テーブルの間にリレーションを追加する方法を示しています。

1. addTableメソッドを使用してデータマネジャーに複数テーブルを追加します。

   // dataManagerに顧客テーブルを追加します。
   var customerTable = dataManager.addTable("customerTable", {
       remote: {
           read: {
               url: 'https://demodata.grapecity.com/wwi/api/v1/customers'
   
           }
       }
   });
   
   // dataManagerに販売テーブルを追加します。
   var salesTable = dataManager.addTable("salesTable", {
       remote: {
           read: {
               url: 'https://demodata.grapecity.com/wwi/api/v1/sales?PageNumber=10&PageSize=500'
           }
       }
   });

2. addRelationshipメソッドを使用してテーブル間のリレーションを追加します。

   このメソッドは、ソースと対象のテーブル、フィールド名、とリレーション名を受け入れます。次のサンプルコードでは、「SalesTable」は対象テーブルであり、「customerKey」は両方のテーブルをバインドする外部キーです。

   // 販売テーブルと顧客テーブルの関係を追加します。
   dataManager.addRelationship(customerTable, "customerKey", "mySales", salesTable, "customerKey", "myCustomer");

3. リレーショナルビューで使用する複数列のドロップダウンビューを作成します。

   // カスタムビューを追加します。
   customerTable.fetch().then(function () {
       var selectView = customerTable.addView("customersView",
           [
               { value: 'customerKey' },
               { value: 'customer' },
               { value: 'category' }
           ]);
   
       // リレーショナルビューで使用する複数列のドロップダウンを作成します。
       var multiSelectStyle = {
           formatter: '{{=IFERROR(CONCAT(PROPERTY(@, "customer"), ", ", PROPERTY(@, "customerKey")), "")}}',
           cellButtons: [
               {
                   imageType: "dropdown",
                   command: "openMultiColumn",
                   useButtonStyle: true,
               }
           ],
           dropDowns: [
               {
                   type: "multiColumn",
                   option: {
                       width: 400,
                       height: 300,
                       dataSource: selectView,
                       bindingInfos: [
                           { name: "customerKey", size: 100, caption:"Customer Key" },
                           { name: "customer", size: "*", caption: "Customer" },
                           { name: "category", size: 100, caption: "Category" }
                       ]
                   }
               }
           ]
       };

4. テーブルシートにビューを連結します。

   var myView = salesTable.addView("myView", [
       { value: "saleKey", width: 100 , caption:"Sale Key"},
       { value: "salesPerson", width: 150, caption:"Sales Person" },
       { value: "myCustomer", width: 350, caption: "Customer Information", style: multiSelectStyle  },
       { value: "address", width: 350, caption: "Address" },
       { value: "stockItem", width: 350, caption: "Stock Item" },
       { value: "quantity", width: 100, caption: "Quantity" }
   ]);
   myView.fetch().then(function () {
       console.log(myView);
       // カスタムビューをテーブルシートに設定します。
       tableSheet.setDataView(myView);
   });