Vaadin - 在调整大小时更新单个 header 列的文本

Vaadin - Update text of a single header column when it is resized

我正在尝试调整列的大小并向其添加 resizeEventListener。这是在 Vaadin 网格中。 调整列大小时,我希望调整后的列应使用我提供的新文本进行更新。但是,就我而言,网格正在更新网格的所有列。其余的列不应该被触及。

我正在使用 Vaadin 7.6.4 作为一个简单的 eclipse 项目。 代码如下:-

    grid.addColumnResizeListener(new ColumnResizeListener(){

        private static final long serialVersionUID = -4280346740116267368L;

        @Override
        public void columnResize(ColumnResizeEvent event) {
            String columnName = (String) event.getColumn().getPropertyId();
            TableColumnData tblData = getColumnData(tblDataLst,columnName);

            double colWidth = event.getColumn().getWidth();
            double colMinWidth = event.getColumn().getWidth() / 2 ;



               grid.getDefaultHeaderRow().getCell(columnName).setText(tblData.getShort_name());
               logger.info("call made to resize column="+columnName);





        }

    });
    grid.setImmediate(true);

简介: 我刚刚在 7.6.4 中使用未定义列宽的简单网格对此进行了测试,如果您在侦听器中添加日志消息,您将看到第一次触发调整大小事件时,所有列的大小都会调整为自动计算的大小。然而,后续事件只会针对相应的列触发,在我的例子中是 Image


来源:

public class MyGridComponent extends VerticalLayout {

    private static final Logger log = LoggerFactory.getLogger(MyGridComponent.class);

    public MyGridComponent() {
        BeanItemContainer<MyBean> dataSource = new BeanItemContainer<>(MyBean.class);
        Grid grid = new Grid(dataSource);
        addComponent(grid);


        grid.getColumn("image").setRenderer(new ImageRenderer());
        grid.setColumnOrder("image", "name", "surname");

        dataSource.addItem(new MyBean(null, "Agent", "Smith"));
        dataSource.addItem(new MyBean(null, "There is", "No spoon"));
        dataSource.addItem(new MyBean(null, "The", "One"));

        for (Grid.Column column : grid.getColumns()) {
            log.debug("Column [{}] has width [{}]", column.getHeaderCaption(), column.getWidth());
        }

        grid.addColumnResizeListener(event -> {
            Grid.Column column = event.getColumn();
            log.debug("Column resize event for [{}] was triggered by [{}] with new width [{}]", column.getHeaderCaption(), event.isUserOriginated() ? "user" : "vaadin", column.getWidth());
        });
    }

    public static class MyBean {
        private ExternalResource image;
        private String name, surname;

        public MyBean(ExternalResource image, String name, String surname) {
            this.image = image;
            this.name = name;
            this.surname = surname;
        }

        public ExternalResource getImage() {
            return image;
        }

        public String getName() {
            return name;
        }

        public String getSurname() {
            return surname;
        }
    }
}

生成日志

 com.example.grid.MyGridComponent: Column [Image] has width [-1.0]
 com.example.grid.MyGridComponent: Column [Name] has width [-1.0]
 com.example.grid.MyGridComponent: Column [Surname] has width [-1.0]
 com.example.grid.MyGridComponent: Column resize event for [Image] was triggered by [user] with new width [149.171875]
 com.example.grid.MyGridComponent: Column resize event for [Name] was triggered by [user] with new width [168.703125]
 com.example.grid.MyGridComponent: Column resize event for [Surname] was triggered by [user] with new width [182.09375]
 com.example.grid.MyGridComponent: Column resize event for [Image] was triggered by [user] with new width [195.171875]
 com.example.grid.MyGridComponent: Column resize event for [Image] was triggered by [user] with new width [334.171875]
 com.example.grid.MyGridComponent: Column resize event for [Image] was triggered by [user] with new width [175.171875]

根据 original enhancement/feature ticket 中的描述判断,这可能是也可能不是错误:

Resizing a column should not affect the size of other columns and the automatic sizing of columns should be disabled after the user has resized some column (like in Table)

这可能是一个错误,因为它会触发所有列的大小调整,但同时它可能不是一个错误,因为所需的行为是从自动调整大小 (-1) 切换到计算或用户定义的大小,这确实发生了。


解决方法: 一个快速而肮脏的解决方法是在构建网格时手动定义列的大小,如下所示(请注意您应该添加只有在定义了大小之后才会触发侦听器,否则每次 setWidth 调用也会触发它):

    for (Grid.Column column : grid.getColumns()) {
        column.setWidth(100);
        log.debug("Column [{}] has width [{}]", column.getHeaderCaption(), column.getWidth());
    }

这似乎产生了所需的行为:

com.example.grid.MyGridComponent: Column [Image] has width [100.0]
com.example.grid.MyGridComponent: Column [Name] has width [100.0]
com.example.grid.MyGridComponent: Column [Surname] has width [100.0]
com.example.grid.MyGridComponent: Column resize event for [Image] was triggered by [user] with new width [133.0]

从我所做的各种测试来看,这似乎只有在用户触发调整大小时才会发生。例如,如果一个人会使用 grid.getColumn("image").setWidth(100),那么其他 2 列将保持未定义 (-1) 宽度,并且该问题将在第一次用户调整大小时再次发生。此外,只要至少 1 列的大小未定义,它似乎就会发生,这意味着您必须手动设置所有列的大小才能使此解决方法生效。


结尾:我很想听听其他更多专家对此事的意见以及是否应将此初始事件传播给听众...