Question

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

我已经尝试过了：

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

期望的结果：

Answer 1

Vaadin Grid仍然没有对多行列的原生支持，但你可以尝试一些即兴创作，例如我建议在链接上看到Vaadin论坛讨论： Grid - How to display multiple lines in one cell

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

Answer 2

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

在网格中添加样式名称：

grid.addStyleName("commentsGrid");

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

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

和

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

对我来说，问题栏是评论。因此，使用样式类 wrap 的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忍者，所以你可以让它变得更漂亮。

如果您不希望所有行都具有相同的高度，那么您可以动态计算rowHeights然后在步骤2中设置它们。我不是百分百肯定。

Answer 3

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

0.00662

这在css中

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);

Example

Answer 4

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

示例：

爪哇：

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

CSS：

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

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

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

4 个答案: