Vaadin Grid 单元格未显示多行行

2022-01-18 00:00:00 grid java vaadin

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

With Vaadin Grid, I want to generate multiline cells for every cell that have more content in cell that overlaps its width.

我已经试过了:

  • java 换行符和 CSS 样式，如 white-space: pre; 但它似乎不起作用.(此解决方案适用于 Table)

  • java new line character and CSS stylings like white-space: pre; but it does not seem to work. (This solution worked for Table)

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

custom renderer setRenderer(HtmlRenderer) with </br>tags and different CSS display settings

期望的结果:

推荐答案

对于列中有大文本并且希望在网格列中显示大数据而不默认截断它们的人:

For people with large text in columns and who want to display large data in Grid Columns without having them cutoff by default:

  1. 为您的网格添加样式名称:

  1. Add a Style name to your grid:

grid.addStyleName("commentsGrid");

如果您想自定义它们，请为您的行和单元格添加一些样式名称:

Add some style names to your rows and cells if you would like to customize them:

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

和

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

  • 对我来说，问题栏是评论.因此，使用样式类 wrap 和固定宽度的 p 标签围绕文本.

  • For me the problem column was comments. So surround the text with p tag with style class wrap and a fixed width. 

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

  • 然后我将上面提到的类设置如下:

  • Then i styled the classes mentioned above as follows:

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

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

    • 我得到了这样的结果:

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

    I am not a CSS ninja, so you can make it way more beautiful than this.

    如果您不希望所有行都具有同样大的高度，那么您可以即时计算 rowHeights，然后在第 2 步中设置它们.我不是 100% 确定.

    If you don't like all rows to have equally large heights then you can calculate rowHeights on the fly and then set them in step 2. I am not 100% sure.

    相关文章