Question

我正在使用第7个Vaadin并看到以下问题：当网格为空时，其多选复选框已打开：

如何修复它？

感谢。

Answer 1

您应该可以在没有项目时隐藏它，并在有一些黑客攻击和theme更新时显示它。黑客是必需的，因为即使隐藏了复选框，在单击该空格时仍会触发侦听器，因此在删除所有项目，单击它以及添加新项目后，即使没有真正的选择，它也可能会被检查。

1）主题

.invisible-select-all-checkbox .v-grid-select-all-checkbox {
    visibility: hidden;
}

2）代码

public class GridWithDisabledSelectAllCheckbox extends VerticalLayout {

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

    public GridWithDisabledSelectAllCheckbox() {
        // basic grid setup with multiple selection
        BeanItemContainer<Person> container = new BeanItemContainer<>(Person.class);
        Grid grid = new Grid();
        grid.setContainerDataSource(container);
        grid.setSelectionMode(Grid.SelectionMode.MULTI);

        // listen for changes in the container
        container.addItemSetChangeListener(event -> {
            if (event.getContainer().size() == 0) {
                // no more items, hide the checkbox
                grid.addStyleName("invisible-select-all-checkbox");
            } else {
                // oo, items, show the checkbox
                grid.removeStyleName("invisible-select-all-checkbox");
            }

            if (grid.getSelectedRows().isEmpty()) {
                // although the checkbox is hidden, the listener is still triggered when clicking the header
                // thus, when adding items after removing all of them, it may appear checked which is not nice.
                // to bypass this we can reset the selection state, if there was nothing previously selected
                // if there were items in the grid but they were not selected, it won't change anything so we should be safe
                grid.getSelectionModel().reset();
            }
        });

        // add some dummy data
        for (int i = 0; i < 10; i++) {
            container.addBean(new Person(i));
        }

        HorizontalLayout buttonsLayout = new HorizontalLayout();

        // add some other dummy data
        buttonsLayout.addComponent(new Button("Add", event -> container.addItem(new Person(container.size()))));

        buttonsLayout.addComponent(new Button("Remove", event -> {
            // remove selected items, if any
            if (!grid.getSelectedRows().isEmpty()) {
                new ArrayList<>(grid.getSelectedRows()).forEach(row -> {
                    // unfortunately, it seems that removing a row doesn't also deselect it
                    // so the hack for resetting the selection is not complete without this part
                    grid.deselect(row);
                    container.removeItem(row);
                });
            }
        }));

        addComponent(grid);
        addComponent(buttonsLayout);
    }

    // basic bean
    public static class Person {
        private String name;
        private String surname;

        public Person(int index) {
            this.name = "name " + index;
            this.surname = "surname" + index;
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

        public String getSurname() {
            return surname;
        }

        public void setSurname(String surname) {
            this.surname = surname;
        }
    }
}

3）结果

Answer 2

似乎我可以直接使用JavaScript关闭此复选框：

String js = "document.getElementById(\"gwt-uid-16\").checked = false;";
Page.getCurrent().getJavaScript().execute(js);

此处可能存在的主要问题是复选框的路径，尤其是当页面上有多个网格时。

Answer 3

container.addItemSetChangeListener(event -> {
            if (event.getContainer().size() == 0) {
                    getSelectionModel().reset();
                    setSelectionMode(SelectionMode.NONE);
                } else {
                    getSelectionModel().reset();
                    setSelectionMode(SelectionMode.MULTI);
                }
        });

Vaadin。多选网格在空时显示所选复选框

3 个答案: