Vaadin 24：Grid过滤后记录数变量不更新显示问题

问题 #

我有一个带过滤功能的Grid，运行正常。想显示过滤后数据集的行数，于是创建了recordCountStr变量，在加载或过滤后获取Grid数据时，把该变量设为Grid的记录数。但只有初始加载时会显示记录数，过滤改变行数后不再更新。我是Vaadin新手，原以为更新变量值后组件会自动重绘，看来不是这样？

核心代码如下：

public class myGridSetup extends Composite<VerticalLayout>{

    private Grid<Person> grid;
    private final VerticalLayout gridBody = new VerticalLayout();
    private final HorizontalLayout filterRow = new HorizontalLayout();
    private final Button applyFilterBtn = new Button("Apply Filters");
    private String recordCountStr = "0 Records";

    public myGridSetup(){
        filterRow.setWidthFull();
        filterRow.add(recordCountStr);
        
        applyFilterBtn.addClickListener(e -> getData(grid));
        
        filterRow.add(applyFilterBtn); 
        filterRow.add(recordCountStr);
        
        createGrid();
        getData(grid);
        gridBody.add(grid);
            
        getContent().add(filterRow);
        getContent().add(gridBody);
    }
    
    private void getData(Grid grid) {
        ListDataView dataView = grid.setItems(dataService.findAll(activeFilterValue));
        recordCountStr = dataView.getItemCount() + " Records Found";
    }

    private Component createGrid(){
        grid = new Grid<>(People.class, false);
        // ... Grid创建代码 ...
    }
}

原因分析 #

你用的recordCountStr是普通Java String类型，不是Vaadin的UI组件。当你把String直接添加到filterRow布局时，Vaadin会自动将其转换为Text组件，但这个转换是一次性的——后续修改recordCountStr变量的值，完全不会影响已添加到布局里的Text组件内容，自然不会触发UI更新。

解决方案 #

把普通String变量换成Vaadin的Text组件（或Label），更新组件文本内容时，Vaadin会自动触发UI重绘，同步显示最新数据。

修改后的代码如下：

public class myGridSetup extends Composite<VerticalLayout>{

    private Grid<Person> grid;
    private final VerticalLayout gridBody = new VerticalLayout();
    private final HorizontalLayout filterRow = new HorizontalLayout();
    private final Button applyFilterBtn = new Button("Apply Filters");
    // 替换为Vaadin的Text组件
    private final Text recordCount = new Text("0 Records");

    public myGridSetup(){
        filterRow.setWidthFull();
        // 添加Text组件到布局
        filterRow.add(recordCount);
        
        applyFilterBtn.addClickListener(e -> getData(grid));
        
        filterRow.add(applyFilterBtn); 
        // 移除重复添加的代码
        // filterRow.add(recordCountStr);
        
        createGrid();
        getData(grid);
        gridBody.add(grid);
            
        getContent().add(filterRow);
        getContent().add(gridBody);
    }
    
    private void getData(Grid grid) {
        ListDataView dataView = grid.setItems(dataService.findAll(activeFilterValue));
        // 更新Text组件的显示文本
        recordCount.setText(dataView.getItemCount() + " Records Found");
    }

    private Component createGrid(){
        grid = new Grid<>(People.class, false);
        // ... Grid创建代码 ...
    }
}

关键修改点 #

• 将普通String变量替换为Vaadin的Text组件
• 构造函数中添加recordCount组件到布局，移除重复添加的冗余代码
• 在getData方法中，通过recordCount.setText(...)更新显示内容，而非修改普通变量

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