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

发布于 2025-01-09 07:00:43 字数 2011 浏览 7 评论 0原文

我们正在更新网格表单以使用 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);

使用给定的网格,单击几个复选框,然后单击“选择”。列表缩小为选定的行,但即使“选定”为空,复选框仍处于选中状态。 “rowSelected”内的日志记录正确返回状态。

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

目前使用Java17和Vaadin 22.0.6(也尝试过23.0.0 beta3)。

谢谢。

We are updating our Grid forms to use LitTemplates for rendering. However we have run into an issue with a checkbox state not being updated even though the underlying data for the state has been updated. The following code demonstrates the issue:

        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);

With the given grid, click a few checkboxes and click 'Select'. The list is reduced to the selected rows, but the checkboxes are still ticked even though 'selected' is empty. The logging within 'rowSelected' is correctly returning the state.

If I remove the column and re-add to grid, then all is displayed correctly. Also, if I select all items in the grid then the select also works correctly.

Currently using Java17 and Vaadin 22.0.6 (have also tried 23.0.0 beta3).

Thanks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

单挑你×的.吻 2025-01-16 07:00:43

我认为你更新时需要调用dataProvider刷新

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

I think you need to call dataProvider refresh when you update

    lit.withFunction("handleCheckClick", (item) -> {
        if(selected.contains(item))
            selected.remove(item);
        else
            selected.add(item);
        testGrid().getDataProvider().refreshAll();
    });
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文