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

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

我已经尝试过了：

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

• 自定义渲染器setRenderer(HtmlRenderer)带有
标记和不同的CSS显示设置

期望的结果：

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 commentsConverter = new Converter(){ @Override public String convertToModel(String value, Class targetType, Locale locale) throws com.vaadin.data.util.converter.Converter.ConversionException { return value; } @Override public String convertToPresentation(String value, Class targetType, Locale locale) throws com.vaadin.data.util.converter.Converter.ConversionException { if(value !=null){ return "
   "+value+"
   "; }else{ return ""; } } @Override public Class getModelType() { return String.class; } @Override public Class 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

您是否尝试将样式渲染器添加到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

Answer 4

将长滚动文本拟合到网格列的另一种方法是为网格设置行高，并使用组件渲染器并在包含文本的网格中渲染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;} 

例