是否可以过滤 vaadin 手风琴元素?
Is it possible to filter vaadin accordion elements?
我有 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", tabs, new VerticalLayout())),
createButton("Offer3", buttonClickEvent -> addNewTab("Offer3", tabs, new VerticalLayout())),
createButton("Offer4", buttonClickEvent -> addNewTab("Offer4", tabs, new VerticalLayout())),
createButton("Offer5", buttonClickEvent -> addNewTab("Offer5", tabs, new VerticalLayout())),
firstDropDown.add("MarketingOffers", firstDropDownContent);
firstDropDown.close();
var secondDropDown = new Accordion();
var secondDropDownContent = new VerticalLayout();
secondDropDownContent.add(
createButton("XOffer1", buttonClickEvent -> addNewTab("XOffer1", tabs, new VerticalLayout())),
createButton("XOffer2", buttonClickEvent -> addNewTab("XOffer2", tabs, new VerticalLayout())),
createButton("XOffer3", buttonClickEvent -> addNewTab("XOffer3", tabs, new VerticalLayout())),
createButton("XOffer4", buttonClickEvent -> addNewTab("XOffer4", tabs, new VerticalLayout())),
createButton("XOffer5", buttonClickEvent -> addNewTab("XOffer5", tabs, new VerticalLayout())),
secondDropDown.add("OperationalOffers", secondDropDownContent);
secondDropDown.close();
等等...
优惠名称在整个应用程序中是唯一的(数据库约束)。
现在我想在布局中的所有手风琴上方添加一个文本字段,作为过滤器。当用户键入“1”时,我想打开、过滤掉并仅向他显示那些包含“1”的手风琴按钮。手风琴组件是否可以使用那种 filtering/hiding 其他按钮?如果是这样,我该如何实现?
我找不到任何关于此的文档。
我正在使用 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!
我有 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", tabs, new VerticalLayout())),
createButton("Offer3", buttonClickEvent -> addNewTab("Offer3", tabs, new VerticalLayout())),
createButton("Offer4", buttonClickEvent -> addNewTab("Offer4", tabs, new VerticalLayout())),
createButton("Offer5", buttonClickEvent -> addNewTab("Offer5", tabs, new VerticalLayout())),
firstDropDown.add("MarketingOffers", firstDropDownContent);
firstDropDown.close();
var secondDropDown = new Accordion();
var secondDropDownContent = new VerticalLayout();
secondDropDownContent.add(
createButton("XOffer1", buttonClickEvent -> addNewTab("XOffer1", tabs, new VerticalLayout())),
createButton("XOffer2", buttonClickEvent -> addNewTab("XOffer2", tabs, new VerticalLayout())),
createButton("XOffer3", buttonClickEvent -> addNewTab("XOffer3", tabs, new VerticalLayout())),
createButton("XOffer4", buttonClickEvent -> addNewTab("XOffer4", tabs, new VerticalLayout())),
createButton("XOffer5", buttonClickEvent -> addNewTab("XOffer5", tabs, new VerticalLayout())),
secondDropDown.add("OperationalOffers", secondDropDownContent);
secondDropDown.close();
等等...
优惠名称在整个应用程序中是唯一的(数据库约束)。
现在我想在布局中的所有手风琴上方添加一个文本字段,作为过滤器。当用户键入“1”时,我想打开、过滤掉并仅向他显示那些包含“1”的手风琴按钮。手风琴组件是否可以使用那种 filtering/hiding 其他按钮?如果是这样,我该如何实现?
我找不到任何关于此的文档。 我正在使用 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!