Vaadin 23.3.1：如何在Grid中显示带换行的JSON数据？

Vaadin版本：23.3.1

先修正代码中的错误 #

你的Details类存在变量名不一致的问题，会导致数据无法正确读取，先修正：

class Details{
    String message;
    Details(String msg){
        this.message = msg;
    }
    public String getMessage() {
        return message; // 原代码返回未定义的msg，改为message
    }
    public void setMessage(String msg) {
        this.message = msg; // 原代码是this.msg，改为this.message
    }
}

方案一：使用HtmlRenderer解析换行 #

Grid默认用TextRenderer渲染文本，会转义所有HTML标签，换行符\n不会生效。可以将字符串中的\n替换为HTML换行标签<br>，再用HtmlRenderer渲染：

// 替换原有的列添加代码
grid.addColumn(new HtmlRenderer<>(details -> details.getMessage().replace("\n", "<br>")))
    .setHeader("MESSAGE");
grid.getColumns().forEach(col -> col.setAutoWidth(true));
grid.setItems(details);

方案二：用TextArea组件渲染列 #

如果需要保留原生换行的展示（甚至允许编辑），可以用ComponentRenderer将TextArea作为列的内容：

grid.addColumn(new ComponentRenderer<>(item -> {
    TextArea textArea = new TextArea();
    textArea.setValue(item.getMessage());
    textArea.setReadOnly(true); // 不需要编辑可去掉此行
    textArea.setHeight("auto"); // 自动适应内容高度
    textArea.setWidthFull();
    return textArea;
})).setHeader("MESSAGE");
grid.getColumns().forEach(col -> col.setAutoWidth(true));
grid.setItems(details);

方案三：格式化JSON后再展示 #

如果你的JSON_values是未格式化的JSON字符串，可以先格式化它生成带换行的结构，再用上述方法展示：

// 导入Jackson的ObjectMapper（需引入jackson-databind依赖）
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;

// 格式化JSON字符串
ObjectMapper mapper = new ObjectMapper();
mapper.enable(SerializationFeature.INDENT_OUTPUT);
String formattedJson = mapper.writeValueAsString(yourJsonObject); // yourJsonObject为原始JSON对象

// 存入Details对象
Details items = new Details(formattedJson);
details.add(items);

之后用方案一或方案二的方式渲染到Grid中，就能看到格式化后的带换行JSON了。

内容的提问来源于stack exchange，提问作者Harry