带有 LitTemplate 的网格不一致地更新复选框

Question

我们正在更新网格表单以使用 LitTemplates 进行渲染。但是，我们运行遇到了一个问题，即即使状态的基础数据已更新，复选框状态也不会更新。以下代码演示了该问题：

        HorizontalLayout hlTest = new HorizontalLayout();
        List<String> selected = new ArrayList<>();
        Grid<String> testGrid =new Grid<>();
        testGrid.setWidth("250px");
        testGrid.setHeight("250px");
        List<String> dataList = new ArrayList<>(List.of("AAAAA", "BBBBB", "CCCCC", "DDDDD", "EEEEE"));
        ListDataProvider<String> dataProvider = new ListDataProvider<>(dataList);
        testGrid.setItems(dataProvider);

        String template = """
                    <vaadin-checkbox @click="${handleCheckClick}" ?checked="${item.rowSelected}"></vaadin-checkbox>
                    <div>${item.text}</div>
                """;

        LitRenderer<String> lit = LitRenderer.of(template);
        lit.withProperty("rowSelected", item -> {
            boolean rc = selected.contains(item);
            System.out.println("Item selected: " + item + " => " + rc);
            return rc;
        });
        lit.withProperty("text",item -> item);
        lit.withFunction("handleCheckClick", (item) -> {
            if(selected.contains(item))
                selected.remove(item);
            else
                selected.add(item);
        });
        testGrid.addColumn(lit);
        Button bSelect = new Button("Select");
        bSelect.addClickListener(buttonClickEvent -> {
            if(selected.size() > 0)
            {
                dataList.clear();
                dataList.addAll(selected);
                selected.clear();
                dataProvider.refreshAll();
            }
        });
        hlTest.add(testGrid, bSelect);

使用给定的网格，单击几个复选框，然后单击 'Select'。该列表减少到 selected 行，但即使 'selected' 为空，复选框仍处于选中状态。 'rowSelected' 中的日志记录正确返回状态。

如果我删除该列并重新添加到网格，则所有内容都会正确显示。另外，如果我 select 网格中的所有项目，那么 select 也可以正常工作。

目前正在使用 Java17 和 Vaadin 22.0.6（也尝试过 23.0.0 beta3）。

谢谢。

Answer 1

我觉得你更新的时候需要调用dataProvider刷新

    lit.withFunction("handleCheckClick", (item) -> {
        if(selected.contains(item))
            selected.remove(item);
        else
            selected.add(item);
        testGrid().getDataProvider().refreshAll();
    });

带有 LitTemplate 的网格不一致地更新复选框

Grid with LitTemplate not updating checkbox consistently

checkbox

vaadin

vaadin-flow

vaadin-grid

vaadin22