关系

Tablesheet 提供了通过创建关系在同一视图中绑定多个数据表的能力。

如上图所示，Tablesheet关系定义了相关表和相关字段，可广泛用于具有主键和外键关系的表结构中。关系中的两个数据表都在数据管理器中进行双向绑定，并且可以访问两个表中的所有属性。

以下步骤显示如何在表“Customers”和“Sales”之间添加表格关系。

• 使用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'
        }
    }
});

• 使用addRelationship方法在表之间添加关系。 此方法接受的参数为： 源表、字段名称、关系名称 和 目标表、字段名称、关系名称 在以下代码示例中，“SalesTable”是目标表，“customerKey”是绑定这两个表的外键。

//在销售表和客户表之间添加关系
dataManager.addRelationship(customerTable, "customerKey", "mySales", salesTable, "customerKey", "myCustomer");

• 创建一个多列下拉视图以用于关系视图

//add custom view
customerTable.fetch().then(function () {
    var selectView = customerTable.addView("customersView",
        [
            { value: 'customerKey' },
            { value: 'customer' },
            { value: 'category' }
        ]);

    // create a multi column drop down to be used in relational View
    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" }
                    ]
                }
            }
        ]
    };

• 将视图绑定到纸张表。

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。
        tableSheet.setDataView(myView);
    });
});