使用 Vaadin Grid，我想为每个单元格生成多行单元格，这些单元格中的内容更多且与其宽度重叠。
我已经试过了：
java \n 换行符和 CSS 样式，如 white-space: pre;，但它似乎不起作用。 （此解决方案适用于 Table）
自定义渲染器 setRenderer(HtmlRenderer) 与 </br>tags 和不同的 CSS 显示设置
【问题讨论】：
Vaadin Grid 仍然没有对多行列的原生支持，但您可以尝试一些即兴创作，例如我建议在链接上查看 Vaadin 论坛讨论： Grid - How to display multiple lines in one cell
您也可以尝试为 Grid 创建自定义渲染器。
【讨论】：
对于在列中具有大文本并且希望在网格列中显示大数据而不默认截断它们的人：
为您的网格添加样式名称：
grid.addStyleName("commentsGrid");
如果您想自定义它们，请为您的行和单元格添加一些样式名称：
grid.setRowStyleGenerator(rowRef -> {// Java 8
return "bigRows";
});
和
grid.setCellStyleGenerator(new Grid.CellStyleGenerator(){
@Override
public String getStyle(CellReference cellReference) {
return "bigCell";
}
});
对我来说，问题专栏是 cmets。所以用p标签包围文本，样式类wrap和固定宽度。
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);
然后我将上面提到的类设置如下：
.commentsGrid td{
height:150px !important;
}
p.wrap{
width: 45em;
word-wrap: break-word;
word-break: break-all;
white-space: normal;
}
我得到了这样的结果：
我不是 CSS 忍者，所以你可以让它比这更漂亮。
如果您不希望所有行都具有同样大的高度，那么您可以即时计算 rowHeights，然后在第 2 步中设置它们。我不是 100% 确定。
【讨论】：
另一种将长滚动文本放入网格列的方法是为网格设置行高，并使用组件渲染器并在包含文本的网格中呈现文本区域。这很好用，因为如果文本太长，用户将在单元格内获得一个滚动条以查看溢出的文本。
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;}
【讨论】：
您是否尝试将样式渲染器添加到您的 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
【讨论】：