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 - 基於內容的着色表格單元

回答

相關問題