Vaadin - 基于内容的着色表格单元

我有一个非常基本的例子，我尝试根据该单元格中存在的特定字符串值对特定单元格进行着色。我输入了打印语句，并且我点击返回“绿色”，返回“橙色”等...点，但在运行时，我只能得到灰色和白色交替的行颜色，没有任何特定的单元格颜色。我使用的CSS我直接从vaadin书中拉出，认为这将是直截了当的。也许有一些我很想念的东西。Vaadin - 基于内容的着色表格单元

格样式生成器代码：

  table.setCellStyleGenerator(new Table.CellStyleGenerator() {     
      @Override 
      public String getStyle(Table source, Object itemId, Object propertyId) { 
       if(propertyId != null) { 
        Item item = source.getItem(itemId); 
        if(item.getItemProperty(propertyId).getValue().getClass() == String.class) { 
         String cellValue = (String)item.getItemProperty(propertyId).getValue(); 
         if(cellValue.equals("AA")) { 
          return "green"; 
         } else if(cellValue.equals("BB")) { 
          return "orange"; 
         } else if(cellValue.equals("AB")) { 
          return "yellow"; 
         } else { 
          return "white"; 
         } 
        } else { 
         return "white"; 
        } 
       } else { 
        return null; 
       } 
      } 
      });

CSS：

.v-table-cell-content-green { 
    background: #33BB00; 
} 

.v-table-cell-content-orange { 
    background: #FCB724; 
} 

.v-table-cell-content-yellow { 
    background: #FFFF00; 
} 

.v-table-cell-content-white { 
    background: #FFFFFF; 
}

当我看一下在浏览器中实际呈现，这是细胞的样子：

<td class="v-table-cell-content v-table-cell-content-green" style="width: 59px;"><div class="v-table-cell-wrapper" style="text-align: left; width: 59px;">AA</div></td>

来源

2014-08-28 Tom Swifty

那么上面的代码实际上工作，如果你把CSS放在正确的CSS文件。我试图将样式添加到myproject.scss，而不是styles.css，我猜你应该这样做。

来源

2014-08-29 19:25:15

myproject.scss也应该工作，当你的编译周期编译成一个CSS，你指定了正确的主题，并包括 – 2014-09-01 06:55:18

我认为它应该，不知道我的项目有什么问题导致不发生。 – 2014-09-02 12:36:29

取决于您的vaadin版本，您可以尝试将CSS代码添加到主题的文件table.scss中 – 2014-12-18 19:15:14

Vaadin - 基于内容的着色表格单元

回答

相关问题