问题描述
我有 6 个 vaadin 手风琴组件,每个组件都有 1000 多个按钮(每个按钮)。单击每个按钮会在我的布局的另一部分打开一个新选项卡。手风琴看起来像这样:
var firstDropDown = new Accordion();
var firstDropDownContent = new VerticalLayout();
firstDropDownContent.add(
createButton("Offer1",buttonClickEvent -> addNewTab("Offer1",tabs,new VerticalLayout())),createButton("Offer2",buttonClickEvent -> addNewTab("Offer2",createButton("Offer3",buttonClickEvent -> addNewTab("Offer3",createButton("Offer4",buttonClickEvent -> addNewTab("Offer4",createButton("Offer5",buttonClickEvent -> addNewTab("Offer5",firstDropDown.add("MarketingOffers",firstDropDownContent);
firstDropDown.close();
var secondDropDown = new Accordion();
var secondDropDownContent = new VerticalLayout();
secondDropDownContent.add(
createButton("XOffer1",buttonClickEvent -> addNewTab("XOffer1",createButton("XOffer2",buttonClickEvent -> addNewTab("XOffer2",createButton("XOffer3",buttonClickEvent -> addNewTab("XOffer3",createButton("XOffer4",buttonClickEvent -> addNewTab("XOffer4",createButton("XOffer5",buttonClickEvent -> addNewTab("XOffer5",secondDropDown.add("OperationalOffers",secondDropDownContent);
secondDropDown.close();
等等...
现在我想在布局中的所有手风琴上方添加一个文本字段,作为过滤器。当用户输入“1”时,我想打开,过滤掉并向他显示那些包含“1”的手风琴按钮。手风琴组件可以过滤/隐藏其他按钮吗?如果是这样,我该如何实现这一目标?
我找不到任何关于此的文档。 我正在使用 vaadin 14,仅限 Java (v11)。
解决方法
我设法通过
实现了这一目标-
添加包含带有 1 列(按钮)而不是垂直布局的网格的手风琴。
-
向网格添加数据提供者
-
将这个简单的侦听器添加到搜索文本字段中,按商品名称过滤,在我的情况下也是按钮名称:)
search.addValueChangeListener(event -> { if (event.getValue().isBlank()) { firstDropDown.close(); secondDropDown.close(); thirdDropDown.close(); forthDropDown.close(); } else { firstDropDown.open(0); secondDropDown.open(0); thirdDropDown.open(0); forthDropDown.open(0); offerFilterObject.setName(event.getValue()); } dataProvider.refreshAll(); })
这基本上会打开所有手风琴,过滤掉您在文本字段中输入的内容,如果没有文本则关闭所有内容 - 这正是我的目标。
非常感谢@Tatu Lund !