如何在 Vaadin Flow 中使用 ContextMenu 和 Grid？

Question

使用 Vaadin Flow (11.0.0) 时，应该可以将 Grid 与 ContextMenu (1.0.0) 一起使用。请参阅问题 https://github.com/vaadin/vaadin-context-menu-flow/issues/5。

这是我目前拥有的：

@Route("menu")
public class MenuTestView extends VerticalLayout {

    public MenuTestView() {
        final Grid<String> g = new Grid<>();
        g.setWidth("20em");
        g.addColumn(s -> s).setHeader("Word");
        g.addColumn(s -> s.length()).setHeader("Length");
        g.setItems("The quick brown fox jumps over the lazy dog".split("\s+"));

        final Label label = new Label();

        final ContextMenu contextMenu = new ContextMenu();
        contextMenu.setTarget(g);

        contextMenu.addItem("Item 1", e -> label.setText(e.getSource().getText()));
        contextMenu.addItem("Item 2", e -> label.setText(e.getSource().getText()));

        add(g, label);
    }

}

问题：

有没有 Vaadin 的例子Flow?
在我们的用例中，只有将鼠标悬停在 selected 行上时，才应启用 ContextMenu。如何实现？
如何select根据鼠标在上下文菜单激活时的位置排成一行？

Answer 1

vaadin-grid-flow 1.2 带来了专门的支持，使网格和上下文菜单可以很好地协同工作。它是三天前发布的。之前可以让它们一起工作，但事件没有说明上下文菜单是在哪个项目上触发的。参见 https://github.com/vaadin/vaadin-grid-flow/releases/tag/1.2.0

您可以通过将以下内容添加到 pom.xml 将您的网格升级到 1.2。

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-grid-flow</artifactId>
    <version>1.2.0</version>
</dependency>

以下是测试中的示例用法：https://github.com/vaadin/vaadin-grid-flow/blob/master/src/test/java/com/vaadin/flow/component/grid/it/ContextMenuGridPage.java

    GridContextMenu<Person> contextMenu = grid.addContextMenu();
    contextMenu.addItem("Show name of context menu target item", e -> {
        String name = e.getItem().map(Person::getName)
                .orElse("no target item");
        message.setText(name);
    });

如何在 Vaadin Flow 中使用 ContextMenu 和 Grid？

How to use ContextMenu with Grid in Vaadin Flow?

vaadin

vaadin-flow