AppMaker 中的条件格式 table

Question

在 AppMaker 中有一个数据 table，并希望根据字段值在多个列中进行条件格式化（绿色到红色）。

例如，如果 ROI 超过 40%，请为数字指定深绿色背景、20% 浅绿色、< 0% 红色等。

理想情况下，我想做一个类似 excel 的渐变，但这可能太复杂了。任何帮助将不胜感激。

Answer 1

几个假设，我猜您的专栏是一个 vertical/horizontal/fixed 面板或您可以在 App Maker 的属性编辑器中编辑的其他类型的小部件，并且 ROI 是您数据源中的一个字段.您可以通过在 'Style Editor' 中设置 3 种样式类来完成此操作，如下所示：

.dark-green {
  background: linear-gradient(to bottom, darkgreen, green);
}
.light-green {
  background: linear-gradient(to bottom, green, lightgreen);
}
.red {
  background: linear-gradient(to bottom, darkred, red);
}

然后在小部件的属性编辑器中转到 'Display' - 'styles' 并按如下方式绑定您的样式：

@datasource.item.Percent === 0 ? 'red' : @datasource.item.Percent > 0 && @datasource.item.Percent <= 0.2 ? 'light-green' : @datasource.item.Percent > 0.2 ? 'dark-green' : ''

您可以尝试使用 CSS 作为背景，一旦您完成了类和绑定样式以找到您喜欢的视觉外观。

要将此概念应用到整个 table 行并仍然包含 'app-ListTableRow' 和 'hoverAncestor' 样式，您可以按如下方式绑定 table 行样式：

@datasource.item.Percent === 0 ? ['red','app-ListTableRow','hoverAncestor'] : @datasource.item.Percent > 0 && @datasource.item.Percent <= 0.2 ? ['light-green','app-ListTableRow','hoverAncestor'] : @datasource.item.Percent > 0.2 ? ['dark-green','app-ListTableRow','hoverAncestor'] : ['app-ListTableRow','hoverAncestor']

AppMaker 中的条件格式 table

Conditional formatting in AppMaker table

google-app-maker