Vaadin 14 格多行单元格答案

【问题标题】：Vaadin 14 grid multi-line cellsVaadin 14 格多行单元格
【发布时间】：2020-04-12 08:23:13
【问题描述】：

我在一列中有很长的字符串，我想在我的网格中将它们显示为多行单元格。我正在使用 Vaadin 14 + Java，并尝试为特定列设置 CSS-Style Class：

Java-代码：

@CssImport("./styles/shared-styles.css")
public class RisikoGrid extends Grid<RisikoEntity> {

    public RisikoGrid() {
         setSizeFull();

         // add the column to the grid
         addColumn(Entity::getAttribute).setHeader("MyCol")
            .setFlexGrow(10).setSortable(true).setKey("mycolumn");

         // set CSS style class for the specific column
         this.getColumnByKey("mycolumn").setClassNameGenerator(item -> {return "grid-mycol";});

   }
}

CSS (shared-styles.css)

.grid-mycol{
    background: red;
    white-space: normal;
    word-wrap: break-word;
}

虽然在我的网络浏览器 (chrome) 中使用检查器时确实看到了类名，但没有应用 css。

我需要进行哪些更改才能使其正常工作？

编辑：这就是我的样式的样子——我什至看不到背景：例如红色：

【问题讨论】：

grid-mycol 的样式如何？浏览器是否加载了shared-styles.css？
其他东西是从共享样式中加载的，并应用于我的 web 应用程序的其他地方。 “我的风格是什么样的”是什么意思？上面的css摘录？
哦，对不起。我没有在问题中看到它。 Chrome 中的计算样式是什么样的？你应该明白为什么没有应用样式
奇怪的是，背景：红色（以及我在 css 中设置的其他内容）不会出现在 css-inspector 中“样式”下的任何位置。我添加了一个截图

标签： java vaadin vaadin-grid vaadin14

【解决方案1】：

您可以使用内置的wrap-cell-content 主题变体来允许文本在单元格内换行。

grid.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT);

参见https://vaadin.com/components/vaadin-grid/html-examples/grid-theme-demos 上的最后一个示例——那里的文本没有那么长，但是如果您将浏览器窗口设置得足够窄，您会看到一些地址在两行中换行。

【讨论】：

我猜这会影响网格的所有单元格/列？例如。如果我只想将它应用于某些列，那么我将不得不使用 ClassNameGenerator 单独添加它？

【解决方案2】：

我调查了为什么我的 css 设置没有显示在检查器中，解决方案是从以下方面进行了最小的更改：

@CssImport("./styles/shared-styles.css")

到

@CssImport(value = "./styles/shared-styles.css", themeFor = "vaadin-grid")

我猜网格的组件范围与全局 CSS 不同。

现在可以了。

【讨论】：

是的，使用 ClassNameGenerator 添加的类名会添加到 Grid 的 shadow DOM 内的元素中，并且不受全局 CSS 的影响。