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

java grid vaadin

2022-09-03 02:51:14

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

我已经准备好了：

java新行字符和CSS样式喜欢，但它似乎不起作用。（此解决方案适用于表）\nwhite-space: pre;
具有标签和不同 CSS 显示设置的自定义渲染器setRenderer(HtmlRenderer)</br>

期望结果：

答案 1

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

您也可以尝试为网格创建自定义渲染器。

答案 2

对于列中包含大文本的用户，以及希望在网格列中显示大数据而不默认将其截断的用户：

将样式名称添加到网格：

grid.addStyleName("commentsGrid");

如果要自定义行和单元格，请向它们添加一些样式名称：

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

和

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

对我来说，问题列是评论。因此，使用带有样式类换行和固定宽度的标记将文本括起来。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);

然后，我将上面提到的类样式如下：

.commentsGrid td{
    height:150px !important;
 }

p.wrap{
  width: 45em;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal; 
}

我得到了这样的结果：

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

如果您不希望所有行的高度都相等，则可以动态计算行高，然后在步骤 2 中设置它们。我不是100%确定。