Vaadin Flow Grid列显隐示例如何实现Button左键触发ContextMenu

实现方案 #

Vaadin 原生 ContextMenu 默认仅监听目标元素的右键触发事件，要实现左键点击按钮呼出菜单，用原生API即可实现，不需要依赖示例中的自定义ColumnToggleContextMenu类，两种可选实现方式如下：

方式1：手动调用open方法（全版本兼容）

给按钮绑定点击监听器，主动触发菜单打开，同时可以直接在菜单项中嵌入复选框同步列的显隐状态，示例代码：

Button showHideColumnsButton = new Button("显示/隐藏列");
showHideColumnsButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY);

ContextMenu contextMenu = new ContextMenu();
// 绑定按钮左键点击事件打开菜单
showHideColumnsButton.addClickListener(event -> {
    contextMenu.open(showHideColumnsButton);
});

for(Grid.Column<?> column : grid.getColumns()) {
    // 创建带复选框的菜单项，默认选中状态和列显隐状态同步
    CheckBox toggleBox = new CheckBox(getColumnName(column), column.isVisible());
    toggleBox.addValueChangeListener(event -> column.setVisible(event.getValue()));
    contextMenu.addItem(toggleBox);
}

方式2：使用openOnClick配置（Vaadin 22+ 支持）

如果使用Vaadin 22及以上版本，可以直接调用ContextMenu的内置配置项实现左键打开，代码更简洁：

Button showHideColumnsButton = new Button("显示/隐藏列");
showHideColumnsButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY);

ContextMenu contextMenu = new ContextMenu(showHideColumnsButton);
// 直接配置左键点击打开菜单
contextMenu.setOpenOnClick(true);

for(Grid.Column<?> column : grid.getColumns()) {
    CheckBox toggleBox = new CheckBox(getColumnName(column), column.isVisible());
    toggleBox.addValueChangeListener(event -> column.setVisible(event.getValue()));
    contextMenu.addItem(toggleBox);
}

官方示例中的ColumnToggleContextMenu是示例项目自定义的封装类，核心逻辑就是封装了上述的左键触发逻辑，不需要额外引入，用原生API即可完全复现示例效果。

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