Vaadin 为网格中的选定行设置背景颜色

Question

我是 vaadin 开发的新手，希望有人能帮助我。我刚刚用模型创建了一个网格 table，一切正常。但是现在，我想更改所选行的背景颜色。我发现，我必须创建一个主题。我在 Vaadin 论坛中找到了这个：https://vaadin.com/forum/thread/17867059/how-to-set-selected-row-opacity-in-vaadin-grid

这是我已经完成的：

我用 link 中的代码创建了一个 html class。我称之为 class grid-selection-theme.html
我把这个class放到了src/main/webapp/frontend/styles/grid-selection-theme.html
在包含网格的 java 文件中，我添加了导入：@HtmlImport("frontend://styles/grid-selection-theme.html);
我将主题添加到网格中：mygrid.addThemeName("grid-selection-theme");

这是论坛中另一个线程的代码：

<dom-module id="grid-header" theme-for="vaadin-grid">
  <template>
    <style>
        :host(:not([reordering])) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]) {
                background-color: rgba(255, 0, 0, .50);
        }
    </style>
  </template>
</dom-module>

但是不行。

Answer 1

这对我来说似乎工作正常，你的框架是什么版本？

如果您使用的是 Vaadin 14，则需要将样式放入 .css 文件中，然后使用 @CSSImport

导入文件

我的样式文件 gridStyles.css 包含：

:host([theme~="grid-selection-theme"]) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]) {
    background-color: red;
}

Class 使用网格的地方定义了这个导入：
@CssImport(value = "./styles/gridStyles.css", themeFor = "vaadin-grid")
网格已添加主题名称

我更改了 host 选择器以反映主题属性：如果同一页面上有多个网格，则样式将仅应用于具有 mygrid.addThemeName("grid-selection-theme");[= 的网格18=]

输出如下所示：

Vaadin 为网格中的选定行设置背景颜色

Vaadin set background color for selected row in a grid

html

css

java

vaadin