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

Question

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

这是我已经做的：

1. 我使用链接中的代码创建了一个html类。我称此类为grid-selection-theme.html
2. 我将此类放入src / main / webapp / frontend / styles / grid-selection-theme.html
3. 在带有网格的java文件中，我添加了导入：@HtmlImport（“ frontend：//styles/grid-selection-theme.html）;
4. 我将主题添加到网格中：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

导入文件

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

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

1. 使用网格的类已定义此导入：
   @CssImport(value = "./styles/gridStyles.css", themeFor = "vaadin-grid")

2. 网格已添加主题名称

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

输出看起来像这样：