Vaadin网格单元格未显示多行行

Question

使用Vaadin Grid，我想为每个单元格生成多行单元格，这些单元格在单元格中具有与其宽度重叠的更多内容。

我已经尝试过了：

• java \\n新行字符和CSS样式，如white-space: pre; 但它似乎没有用。 （此解决方案适用于表）

• 带有</br>标签和不同CSS显示设置的自定义渲染器setRenderer(HtmlRenderer)

期望的结果：

Answer 1

Vaadin Grid仍然没有对多行列的原生支持，但你可以尝试一些即兴创作，例如我建议在链接上看到Vaadin论坛讨论： 网格 - 如何在一个单元格中显示多行

您还可以尝试为Grid创建自定义渲染器。

Answer 2

对于列中包含大文本且希望在网格列中显示大数据但默认情况下不截断的人员：

1. 在网格中添加样式名称：

   grid.addStyleName("commentsGrid");

2. 如果要自定义样式名称，请在行和单元格中添加一些样式名称：

    grid.setRowStyleGenerator(rowRef -> {// Java 8 return "bigRows"; }); 

   和

    grid.setCellStyleGenerator(new Grid.CellStyleGenerator(){ @Override public String getStyle(CellReference cellReference) { return "bigCell"; } }); 

3. 对我来说问题专栏是评论。 因此，使用带有样式类换行和固定宽度的p标记来环绕文本。

    Converter<String, String> commentsConverter = new Converter<String, String>(){ @Override public String convertToModel(String value, Class<? extends String> targetType, Locale locale) throws com.vaadin.data.util.converter.Converter.ConversionException { return value; } @Override public String convertToPresentation(String value, Class<? extends String> targetType, Locale locale) throws com.vaadin.data.util.converter.Converter.ConversionException { if(value !=null){ return "<p class=\\"wrap\\">"+value+"</p>"; }else{ return ""; } } @Override public Class<String> getModelType() { return String.class; } @Override public Class<String> getPresentationType() { return String.class; } }; grid.getColumn("comments").setRenderer(new HtmlRenderer(), commentsConverter); grid.getColumn("comments").setWidth(700d); 

4. 然后我设置了上面提到的类如下：

    .commentsGrid td{ height:150px !important; } p.wrap{ width: 45em; word-wrap: break-word; word-break: break-all; white-space: normal; } 

我得到的结果如下：

我不是CSS忍者，所以你可以让它变得更漂亮。

如果你不喜欢所有行都具有同样大的高度，那么你可以动态计算rowHeights然后在步骤2中设置它们。我不是100％肯定。

Answer 3

将长滚动文本拟合到网格列的另一种方法是为网格设置行高，并使用组件渲染器并在包含文本的网格中渲染textarea。 这很好用，因为如果文本太长，用户将在单元格内部获得滚动条以查看溢出的文本。

Column screen = grid.addComponentColumn(role->{
        TextArea ta = new TextArea();
        ta.setValue(VALUE_PROVIDER_TEXT);
        ta.setStyleName("clear");
        ta.setHeight("100px");
        ta.setReadOnly(true);
        ta.setWidth("150px");
        return ta;
    });
    screen.setWidth(150);
    screen.setCaption("Screens");
    grid.setBodyRowHeight(100);

这在css中

  .v-textarea-clear{background-color: transparent;border: none;}

例

Answer 4

您是否尝试将样式渲染器添加到ceolumns以添加自定义css类，您可以在其中放置已定义的高度？

例：

Java的：

grid.setCellStyleGenerator(cellRef -> // Java 8
    "heigher");

CSS：

.v-grid-cell.heigher {
    height: 10em;
}

示例来自： https ： //vaadin.com/docs/-/part/framework/components/components-grid.html