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

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

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

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

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

JavaScript	コードのコピー
// 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' } } });

JavaScript

コードのコピー

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

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

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

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

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

JavaScript	コードのコピー
// カスタムビューを追加します。 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" } ] } } ] };

JavaScript

コードのコピー

// カスタムビューを追加します。
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" }
                    ]
                }
            }
        ]
    };

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

JavaScript	コードのコピー
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); }); });

JavaScript

コードのコピー

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