Vaadin - 基于内容的着色表单元格 [英] Vaadin - Coloring table cells based on content

问题描述

我有一个非常基本的例子，在这里我想根据特定的单元格中存在的特定的字符串值来着色。我输入打印语句，我打回报绿色，返回橙色等点，但在运行时，我只得到灰色和白色交替行的颜色，我的具体细胞颜色。我使用的css直接从vaadin的书，我认为这将是直接的。也许有一些小我缺少。

I have a very basic example here where I'm trying to color specific cells based on a specific string value being present in that cell. I put in print statements and I'm hitting the return "green", return "orange", etc... points, but at run time I'm only getting the gray and white alternating row colors, none of my specific cell colors. The css I'm using I pulled directly from book of vaadin, thought this would be straightforward. Maybe there's something small I'm missing.

单元格样式生成器代码：

Cell style generator code:

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

当我看到实际在浏览器中呈现的内容时，单元格如下：

When I look at what is actually rendered in the browser, this is what a cell looks like:

<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>

推荐答案

上面的代码实际上可以工作，如果你把css在正确的css文件。我试图添加样式到myproject.scss而不是styles.css，我想你应该。

Well the above code actually works if you put the css in the correct css file. I was trying to add the styles to myproject.scss as opposed to styles.css where I guess you're supposed to.

这篇关于Vaadin - 基于内容的着色表单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！