瓦丁组合框

Question

我想创建 Vaadin 下拉菜单，其中有 2 个分隔符。我找不到实现该方法的方法，任何人都可以帮助我解决这个问题吗？

这就是我想要显示下拉列表的方式：

• 选项 1
• 选项 2
• ------------；
• 选择1
• 选择2
• ------------；
• 第 1 组

我该怎么做？

Answer 1

没有内置方法可以向选择添加分隔符。我能想到的唯一方法是添加一个带有所需分隔符作为标题的项目。例如，如果您使用默认标题（项目 ID）select.addItem("-----"); 就足够了。这应该适用于 ComboBox 和 NativeSelect。

Answer 2

您可以实现一个新的 Vaadin 组件，包括客户端行为，但这不是一个简单的解决方案。此页面https://vaadin.com/book/-/page/gwt.html 可以为此提供帮助。

此外，使用现有组件创建您自己的组件是另一种解决方案。您可以实现一个特殊的组合框，它采用字符串或组件数组的值。实现此目的的方法是使用具有大小和位置的 Vaadin 面板、布局和窗口以及单击侦听器。

Answer 3

我自己还没有尝试过，但可以尝试一下 NativeSelection 下拉菜单。

Answer 4

你总是可以做

{select.addItem("-----");}

有一次我也想做类似的事情，但 Vaadin 没有正确的方法来做到这一点。我实际上创建了一个 Vaadin 小部件来扩展组合框。在 Vaadin 的客户端小部件中，他们在将项目添加到列表之前过滤掉 HTML 内容。因此，使用客户端代码，我覆盖该功能并使用 HTML 标记“
”来添加该行。

Answer 5

select.addItem("-----"); 

看起来是最好的方法，我不知道其他一些

顺便说一句，如果您正在从某个列表中读取项目，您可以将其与一些项目计数器和 (itemsCount%n)==0 运算符结合起来，以在之后设置分隔符已插入“n”项:)

Answer 6

您可以将项目添加到所选内容（如前所述），然后使用一些 javascript 禁用分隔符：

1. 将项目添加到选择内容。
   cb.addItem("分隔符");
   cb.setItemCaption("separator", "-------------");

2. 执行 JavaScript

   最终字符串 javascript = ""

   • “var selects = document.getElementsByTagName('select');”
   • “for(var j = 0;j < selects.length;j++){”
   • “var op = selects[j].getElementsByTagName('option');”
   • “for (var i = 0; i < op.length; i++) {”
   • " if(op[i].text == '" + seperatorText + "') op[i].disabled = true;"
   • "}}";
     Page.getCurrent().getJavaScript().execute(javascript);

Answer 7

您使用 ComboBox 而不是 Select 是否有原因，因为通过 select 您可以做到这一点。

Select select = new Select();
select.setItems("Option 1", "Option 2", "select 1", "select 2", "group 1");
select.addComponentAtIndex(2, new Hr());
select.addComponentAtIndex(5, new Hr());

或者您可以使用菜单栏，但它看起来与组合框非常不同。

menuBar = new MenuBar();
MenuItem menuItem = menuBar.addItem("Select");
menuItem.getSubMenu().addItem("Option 1");
menuItem.getSubMenu().addItem("Option 2");
menuItem.getSubMenu().addItem(new Hr());
menuItem.getSubMenu().addItem("select 1");
menuItem.getSubMenu().addItem("select 1");
menuItem.getSubMenu().addItem(new Hr());
menuItem.getSubMenu().addItem("group 1");