如何在GWT FlexTable中淡化单元格的颜色

时间:2014-10-21 22:02:28

标签: java jquery css gwt flextable

我正在使用GWT FlexTable来显示数值。

如果我使用Label标签和setWidget(row,col,label),我可以使用gwtquery来淡化这样的颜色:

$(label).css("backgroundColor",color_from);

$(label).animate("backgroundColor:'" + color_to + "'", 5000, new Function() {
    public void f(Element e) {
    }
});

效果是从“color_from”到“color_to”的漂亮淡出。

我想知道如何直接在Tables单元格上执行此操作,而无需为要使用此效果的每个单元格创建Label。这可能吗?

1 个答案:

答案 0 :(得分:0)

你可以试试这个。

在CSS文件中:

.myTableStyle td {
    background-color: #FFF:
    -webkit-transition: background-color 5s; /* Chrome, Safari, Opera */
    transition: background-color 5s;
}
.highlighted {
    background-color: #F00;
}

在GWT中:

table.addStyleName("myTableStyle");
table.getFlexCellFormatter().setStyleName(row, column, "highlighted");

更新:

以相反的顺序进行操作有点复杂:

.myTableStyle td {
    background-color: #FFF:
}
.backgroundEffect {
    -webkit-transition: background-color 5s; /* Chrome, Safari, Opera */
    transition: background-color 5s;
}
.highlighted {
    background-color: #F00;
}

在GWT中:

table.getFlexCellFormatter().setStyleName(row, column, "highlighted");
table.getFlexCellFormatter().addStyleName(row, column, "backgroundEffect");
table.getFlexCellFormatter().removeStyleName(row, column, "highlighted");