Vaadin網格單元格未顯示多行行

Question

使用Vaadin Grid，我想為每個單元格生成多行單元格，這些單元格在單元格中具有與其寬度重疊的更多內容。

我已經嘗試過了：

• java \\n新行字符和CSS樣式，如white-space: pre; 但它似乎沒有用。 （此解決方案適用於表）

• 帶有</br>標簽和不同CSS顯示設置的自定義渲染器setRenderer(HtmlRenderer)

期望的結果：

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

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

將長滾動文本擬合到網格列的另一種方法是為網格設置行高，並使用組件渲染器並在包含文本的網格中渲染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;}

例

Answer 4

您是否嘗試將樣式渲染器添加到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