层叠列头

Tablesheet 提供了创建层叠列头的能力，有助于在单行视图中显示来自多个相关表的字段。您可以在更简化的行视图中显示表格以进行数据输入。

在addView方法中添加字段时，可以使用每个字段的cross属性设置交叉列。“cross”属性可用于设置字段、属性、筛选和标题等选项。

以下步骤显示如何使用表格中“package”字段中的数组值添加层叠列头。

• 在数据源架构中使用列选项添加多个table。 只有在架构中定义为查找的字段才能在层叠列头中使用。

//将customer table添加到数据管理器
var customerTable = dataManager.addTable("customerTable", {
    remote: {
        read: {
            url: 'https://demodata.grapecity.com/wwi/api/v1/customers'

        }
    }
});

// 将sales table添加到数据管理器
var salesTable = dataManager.addTable("salesTable", {
    remote: {
        read: {
            url: 'https://demodata.grapecity.com/wwi/api/v1/sales?PageNumber=10&PageSize=500'
        }
    },
    schema:{
        columns:{
            package: { lookup: ["Each","Pair"] }, // 使用层叠列头特性
        }
    }
});

• 指定table的主键

customerTable.primaryKey("customerKey")
salesTable.primaryKey("saleKey")

• 添加table之间的关系

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

• 添加带有层叠列头选项的自定义视图。

//添加自定义视图
customerTable.fetch().then(function () {
    var selectView = customerTable.addView("customersView",
        [
            { value: 'customerKey' },
            { value: 'customer' },
            { value: 'billToCustomer' },
            { 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" }
                    ]
                }
            }
        ]
    };
    var myView = salesTable.addView("myView", [
        { value: "saleKey", width: 100, caption: "Sale Key" },
        { value: "salesPerson", width: 150, caption: "Sales Person" },
        { value: "myCustomer", width: 250, caption: "Customer Information", style: multiSelectStyle },
        { value: "address", width: 300, caption: "Address" },
        { value: "stockItem", width: 350, caption: "Stock Item" },
        { value: 'quantity', width: 80,cross: { over: 'package' } } // cross column
    ]);
    myView.fetch().then(function () {
        console.log(myView);
        // 为集算表设置自定义视图。
        tableSheet.setDataView(myView);
    });
});

将生成以下输出：

使用TableSheet面板

您可以通过侧面板在集算表中设置层叠列头。定义数据源架构时，应在列选项中设置查找属性。

A如下图所示，点击查找字段显示层叠列头，将所需字段拖动到值区域以创建层叠列头。

将生成以下输出：