AppMaker表中的条件格式 [英] Conditional formatting in AppMaker table

问题描述

在AppMaker中具有数据表，并希望根据字段值在几列中进行条件格式设置(从绿色到红色).

Have a data table in AppMaker and would like to do conditional formatting (Green to Red) in several columns based on the field value.

例如，如果ROI超过40％，则为该数字添加深绿色bg，为20％呈现浅绿色，<0％红色，等等

For example if ROI is over 40% give the number a dark green bg, 20% light green, < 0% red, etc.

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

Ideally I want to do a gradient like excel but that might be too complicated. Any help would be appreciated.

推荐答案

假设是一对，我猜您的栏是垂直/水平/固定面板或其他类型的小部件，您可以在App Maker的属性编辑器中进行编辑，ROI是您数据源中的一个字段.您可以通过在样式编辑器"中设置3个样式类来完成此操作:

Couple of assumptions, I am guessing your column is a vertical/horizontal/fixed panel or some other type of widget that you can edit in App Maker's property editor and that ROI is a field in your datasource. You can get this accomplished by setting 3 style classes in your 'Style Editor' like this:

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

然后在窗口小部件的属性编辑器中转到显示"-样式"，然后按如下所示绑定样式:

Then in the property editor for your widget go to 'Display' - 'styles' and bind your styles as follows:

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

您可以使用CSS作为背景，一旦有了类和样式的绑定，就可以找到想要的外观.

You can play around with the CSS for the background and such once you have your classes and binding for the styles accomplished to find a visual look that you like.

要将此概念应用于整个表行并仍然包括"app-ListTableRow"和"hoverAncestor"样式，则可以按以下方式绑定表行样式:

To apply this concept to the entire table row and still include the 'app-ListTableRow' and 'hoverAncestor' styling you would bind your table row styles as follows:

@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表中的条件格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！