规则

TableSheet 支持不同的数据规则，以帮助强调和可视化数据的变化以及控制在 TableSheet 中输入的数据类型。

条件格式和数据验证

TableSheet 在 TableSheet 视图中支持数据绑定条件格式和数据验证。

您可以在定义视图列信息时指定c conditionalFormat 和 validator 属性。这些属性接受下表中列出的不同类型的规则选项数组。

TableSheet 支持以下条件格式和数据验证类型。

以下代码示例演示如何在 TableSheet 中应用条件格式和数据验证。

// 应用条件格式formula
var formulaRule = {
    ruleType: "formulaRule",
    formula: "@<10",
    style: {
        backColor: "green",
        foreColor: "lime"
    }
};
// 创建数据验证器
var positiveNumberValidator = {
    type: "formula",
    formula: '@>0',
    inputTitle: 'Data validation:',
    inputMessage: 'UnitPrice cannot be less than 0.',
    highlightStyle: {
        type: 'icon',
        color: "red",
        position: 'outsideRight',
    }
};

//绑定视图
myTable.fetch().then(function () {
    var view = myTable.addView("myView", [

        { value: "stockItem", width: 300, caption: "Stock Item" },
        { value: "unitPrice", width: 120, caption: "Unit Price", conditionalFormats: [formulaRule], validator: positiveNumberValidator }, // apply conditional formating and data validation here
        { value: "taxRate", width: 120, caption: "Tax Rate" },
        { value: "=([@unitPrice] * [@taxRate])/100 + [@unitPrice]", caption: "Total Price", width: 150 }
    ]);
    sheet.setDataView(view);
});

样式规则

样式规则是在满足条件时应用的样式。在向数据管理器表添加视图时，可以使用GC.Data.View类中的addStyleRule添加状态规则和公式规则，或使用addView方法参数viewOptions。

• State Rule – 触发行或列状态时应用样式。例如，如果要在鼠标悬停在某一行上时高亮显示该行的灰底颜色，或高亮显示所选列，如下图所示。
• Formula Rule – 将样式应用于满足特定条件的特定值。例如，如果要突出显示产品的较低价格，请将"[@UnitPrice]<10"等公式设置为不同的前景色，如下图所示。

下面的代码示例演示如何在TableSheet中应用状态规则和公式规则。

// 设置公式规则
var formulaRule = {
    ruleType: "formulaRule",
    formula: "@<=10",
    style: {
        borderLeft: { color: "orange", style: "medium" },
        borderRight: { color: "orange", style: "medium" },
        borderTop: { color: "orange", style: "medium" },
        borderBottom: { color: "orange", style: "medium" }
    }
};

//绑定视图
var myView = productTable.addView("myView", [
    { value: "Id", caption: "ID" },
    { value: "ProductName", caption: "Name", width: 400 },
    { value: "ReorderLevel", caption: "ReorderLevel", width: 120},
    { value: "UnitPrice", caption: "Unit Price", width: 100, readonly: true, conditionalFormats: [formulaRule] },
    { value: "UnitsInStock", caption: "Units In Stock", width: 100 },
    { value: "UnitsOnOrder", caption: "Units On Order", width: 100 }
]);

// 通过addStyleRule方法添加规则
myView.addStyleRule("lowPrice", { backColor: "green", foreColor: "white" }, {
    formula: "[@UnitPrice] <= 10"
});

myView.addStyleRule("HoverStyle", { backColor: "gray", foreColor: "white" }, {
    direction: GC.Data.StateRuleDirection.row,
    state: GC.Data.RowColumnStates.hover
});

myView.addStyleRule("SelectedStyle", { backColor: "yellow", foreColor: "red"}, {
    direction: GC.Data.StateRuleDirection.column,
    state: GC.Data.RowColumnStates.selected
})

myView.fetch().then(function () {
    sheet.setDataView(myView);
});