时间戳

首页 > 解决方案 > 如何在 Vaadin 8 中将转换器添加到网格列？

vaadin - 如何在 Vaadin 8 中将转换器添加到网格列？

问题描述

我正在使用 Vaadin 8，但我遇到了问题。

在我的构造函数中，我创建了一个添加到布局中的网格。

Grid<Row> grid = new Grid<>(); grid.removeAllColumns(); //Here, I add columns to the grid grid.addColumn(... grid.addColumn(… …

然后我想在我的网格中添加一个转换器，如下所示：

 grid.getColumn("delete").setConverter(new StringToUrlConverter("dustbin"));

我不明白的是错误消息指出为什么我不能添加转换器。错误消息如下：

类型 >Grid.Column<ContactView.Row,capture#1-of ?> 的方法 setConverter(StringToUrlConverter) 未定义

那么我该如何设置我的转换器呢？

这是我的转换器：

package com.example.vaadin;

import com.vaadin.data.Converter;
import com.vaadin.data.Result;
import com.vaadin.data.ValueContext;

public class StringToUrlConverter implements Converter<String, String> {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    String imagePath = "";
    
    public StringToUrlConverter(String path) {
        this.imagePath=path;
    }

    public String getImagePath() {
        return imagePath;
    }

    @Override
    public Result<String> convertToModel(String value, ValueContext context) {
         
         return Result.ok(null);
    }

    @Override
    public String convertToPresentation(String value, ValueContext context) {
         
        if(value.equals("delete")) {
            return "<span><img src='img/" + getImagePath() + ".jpg' width='20' height='20'></span>";    
        }
        
        return "";
    }

}

标签： vaadinconvertersvaadin8vaadin-grid

解决方案

Vaadin 8 中没有 setConverter 方法，它在 Vaadin 7 中。相反，在 Vaadin 8 和更新版本中，您应该使用addColumn带有值提供者的方法版本。请参阅Vaadin 论坛中的旧讨论。

StringToUrlConverter converter = new StringToUrlConverter (path);
grid.addColumn(row -> converter.convertToPresentation(row.getDelete(), String.class, ui.getLocale())).setCaption("Delete");

但是，在您的情况下，您可能也不需要。我从您的代码中看到您只是想在网格的单元格中添加删除按钮或类似的东西。

从 Vaadin 8 开始，您可以使用以下命令在 Grid 中添加组件：

grid.addComponentColumn(row -> {
    Image image = new Image();
    image.setSrc(path);
    image.addClickListener(event -> {
         // add code to remove the row
         grid.getDataProvider().refreshAll();
    });
    return image;
}

推荐阅读