在 Vaadin Flow 14 中过滤网格中的项目的简单示例

2023-12-24

我想抑制某些项目的显示GridVaadin Flow 14 中的小部件。

例如,如果用户输入年份IntegerField小部件,我希望网格仅显示相关日期在那一年之前的项目。日期在该日期或之后的项目应该消失。如果用户更改年份数字,则应重新应用过滤,并在网格中适当显示更少或更多的项目。

我见过过滤器Grid讨论过,但无法理解各种活动部件。也许有人可以举一个简单的例子?


我将提交使用过滤网格的方法ListDataProvider。我的方法的目标是能够为您想要的任何列添加过滤字段, 然后过滤器可以相互组合,还有那个每个过滤器值可以随时更改为其他值。通过我的解决方案,您还可以使用 TextField 之外的其他输入字段。因此也可以使用 ComboBox 进行枚举等。

关键是当你使用setFilterListDataProvider 的方法,任何其他过滤器都会被忽略,因此多个过滤器不会同时工作。但是当你使用addFilter唯一的是,您永远无法更改您定义的过滤器,只能在其上添加另一个过滤器。您可以让用户使用专用于此目的的按钮清除所有过滤器,但我想避免这种情况。

这就是我避免这个难题的方法: 每次那个any过滤器值发生变化,我使用重置当前过滤器setFilter。但在该新过滤器中,我将检查所有过滤器字段的值,而不仅仅是值刚刚更改的字段的值。换句话说,我始终只有一个过滤器处于活动状态,但该过滤器考虑了所有定义的过滤器值。

这是带有网格的视图的完整工作代码(见下图),使用与OP原始答案相同的示例。您可以同时按字符串表示形式、年、月或星期几过滤此网格。

@Route(value = "Test", layout = MainView.class)
public class TestView extends VerticalLayout {
    private Grid<LocalDate> grid;
    private TextField toStringFilter, yearFilter;
    private ComboBox<Month> monthFilter;
    private ComboBox<DayOfWeek> dayOfWeekFilter;

    public TestView() {
        grid = new Grid<>(LocalDate.class, false);
        List< LocalDate > dates = List.of(
                LocalDate.of( 2020 , Month.JANUARY , 23 ) ,
                LocalDate.of( 2019 , Month.FEBRUARY , 24 ) ,
                LocalDate.of( 2022 , Month.MARCH , 25 ) ,
                LocalDate.of( 2011 , Month.APRIL , 26 ) ,
                LocalDate.of( 2022 , Month.APRIL , 23 )
        );
        grid.setItems( new ArrayList< LocalDate >( dates ) );
        grid.addColumn( LocalDate :: toString ).setHeader("String Representation").setKey("tostring");
        grid.addColumn( LocalDate :: getYear ).setHeader("Year").setKey("year");
        grid.addColumn( LocalDate :: getMonth ).setHeader("Month").setKey("month");
        grid.addColumn( LocalDate :: getDayOfWeek ).setHeader("Day Of Week").setKey("dayofweek");

        prepareFilterFields();
        add(grid);
    }

    private void prepareFilterFields() {
        HeaderRow headerRow = grid.appendHeaderRow();

        toStringFilter = gridTextFieldFilter("tostring", headerRow);
        yearFilter = gridTextFieldFilter("year", headerRow);
        monthFilter = gridComboBoxFilter("month", headerRow, Month::toString, Month.values());
        dayOfWeekFilter = gridComboBoxFilter("dayofweek", headerRow, DayOfWeek::toString, DayOfWeek.values());
    }

    private <T> ComboBox<T> gridComboBoxFilter(String columnKey, HeaderRow headerRow, ItemLabelGenerator<T> itemLabelGenerator, T... items) {
        ComboBox<T> filter = new ComboBox<>();
        filter.addValueChangeListener(event -> this.onFilterChange());
        filter.setItemLabelGenerator(itemLabelGenerator);
        filter.setItems(items);
        filter.setWidthFull();
        filter.setClearButtonVisible(true);
        headerRow.getCell(grid.getColumnByKey(columnKey)).setComponent(filter);
        return filter;
    }

    private TextField gridTextFieldFilter(String columnKey, HeaderRow headerRow) {
        TextField filter = new TextField();
        filter.setValueChangeMode(ValueChangeMode.TIMEOUT);
        filter.addValueChangeListener(event -> this.onFilterChange());
        filter.setWidthFull();
        headerRow.getCell(grid.getColumnByKey(columnKey)).setComponent(filter);
        return filter;
    }

    private void onFilterChange(){
        ListDataProvider<LocalDate> listDataProvider = (ListDataProvider<LocalDate>) grid.getDataProvider();
        // Since this will be the only active filter, it needs to account for all values of my filter fields
        listDataProvider.setFilter(item -> {
            boolean toStringFilterMatch = true;
            boolean yearFilterMatch = true;
            boolean monthFilterMatch = true;
            boolean dayOfWeekFilterMatch = true;

            if(!toStringFilter.isEmpty()){
                toStringFilterMatch = item.toString().contains(toStringFilter.getValue());
            }
            if(!yearFilter.isEmpty()){
                yearFilterMatch = String.valueOf(item.getYear()).contains(yearFilter.getValue());
            }
            if(!monthFilter.isEmpty()){
                monthFilterMatch = item.getMonth().equals(monthFilter.getValue());
            }
            if(!dayOfWeekFilter.isEmpty()){
                dayOfWeekFilterMatch = item.getDayOfWeek().equals(dayOfWeekFilter.getValue());
            }

            return toStringFilterMatch && yearFilterMatch && monthFilterMatch && dayOfWeekFilterMatch;
        });
    }
}

Unfiltered Grid: grid with filters, no active filter


Filtered By Year: grid with filters, filtered by year


Filtered By Year AND Month: grid with filters, filtered by year and month

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Vaadin Flow 14 中过滤网格中的项目的简单示例 的相关文章

随机推荐

  • 使 proj_api.h 可用于 pip install cartopy

    我正在尝试安装cartopy via pip install cartopy 我已经安装了proj 4它已经在这里放置了必要的文件 Downloads proj 4 9 2 ls l usr local include proj api h
  • 无法将计数标签放置在存在异常值的箱线图须处

    我试图将观察计数的标签放置在箱线图胡须的末端 但当存在异常值时它似乎不起作用 我尝试将最大 最小值与我认为计算出的晶须长度 四分位数 1 或四分位数 3 或 1 5 四分位数范围 进行比较 但标签既不会放置在最大 最小值处 也不会放置在胡须
  • 使用 awk 在文件中查找字符串

    所以我想从文件中抓取一个字符串 文件包含数据 Id Name CreationDate Comment 1 testing 19 10 11 created by jag 2 develop 19 10 12 created by jag
  • (FB Instant games) 我如何获取/设置屏幕分辨率?

    如何在移动 Facebook 应用程序或 Messenger 中获取 设置即时游戏的屏幕分辨率 我尝试通过 window screen width 和 window innerWidth 获得它 它返回了我360像素 但我在Chrome浏览
  • 了解 C++ 中的顺序一致性栅栏

    我正在阅读有关 C 中的内存顺序的内容 我可以很好地理解放松和获取 释放模型 但我正在努力解决顺序一致性问题 如果我没记错的话 从参考参数 https en cppreference com w cpp atomic memory orde
  • 如何使用CAGradientLayer绘制渐变色轮?

    我从这些链接中得到了一些参考 色轮背后的算法是什么 https stackoverflow com questions 4897181 what is the algorithm behind a color wheel 色轮背后的数学 h
  • 将日期字符串解析为带时区的日期时间

    我有一个字符串 r Thu Dec 17 08 56 41 CST 2020 这里CST代表中国中部时间 亚洲 上海 我想将它解析为日期时间 我正在做类似的事情 from dateparser import parse r1 parse r
  • 如何评估 PHP 中作为字符串传递的公式?

    只是想找出正确且更安全的方法来执行作为字符串传递的数学运算 在我的场景中 它是从图像 EXIF 数据中获取的值 经过一番研究后 我发现了两种方法 首先 使用eval function calculator1 str eval str str
  • 如何在注销时从 uber API 中删除访问令牌?

    I am doing integrate uber sdk using oAuth2Client in ios I got access token using https login uber com oauth v2 token htt
  • 使用 UITextView 防止自动换行

    使用iPhone sdk 3 1 2 我有一个启用垂直和水平滚动的 UITextView 控件 我希望每行文本都显示而不换行 以便用户可以水平滚动来查看它 我遇到的问题是 即使启用了水平滚动 文本也会以 iPhone 屏幕的宽度换行 即 3
  • android 4.4.X:taskAffinity 和 launchmode 与 Activity 生命周期

    我开发了一个简单的应用程序 它演示了我注意到的 Android 4 4 X 设备上的一些奇怪行为 假设我想要有 2 个 主要 活动 其中第一个活动每次恢复时都会说 Hello 通过启动 HelloActivity 而第二个活动则有andro
  • 调整 JButton 中 ImageIcon 的大小

    我正在创建一个包含特定 ImageIcon 的 JButton 主要问题是原始图标尺寸比按钮尺寸大得多 结果当按钮显示时 只能看到部分图标 调整 ImageIcon 大小以使其适合 JButton 的方法是什么 Image img icon
  • 无法更改开关颜色

    我正在寻找仅将这种颜色应用于所有开关 但默认情况下 它正在采取colorAccent而不是这个主题进行切换 装置 棉花糖 layout
  • Git:停止 git 推送

    我正在将一个大文件推送到 git 但连接速度非常慢 终止此推送 推送中 并在连接更好时恢复它的最安全方法是什么 Killing the client Ctrl C or any other method won t cause the da
  • 无法批量分配受保护的属性:tags_attributes?

    我正在尝试按照以下方式为帖子创建标签导轨指南 http guides rubyonrails org getting started html tag rb class Tag lt ActiveRecord Base attr acces
  • 如何检查Python应用程序是否在AWS lambda函数中运行?

    我有一个连接到数据库的 Python 应用程序 我希望数据库凭据在本地环境 用于测试 或 lambda 函数 用于生产 中运行时有所不同 有什么方法可以从 Python 应用程序检测它是否在 lambda 函数内运行 编辑2 感谢 Mark
  • 如何绕过open-uri中的SSL证书验证?

    我尝试通过 https 连接访问带有 open uri 的文件 不幸的是证书有问题 我得到了证书验证失败错误 我对此无能为力 所以我必须绕过验证 我找到了这个answer http www peterkrantz com 2007 open
  • C# 错误“...的类型初始值设定项引发了异常

    此错误仅发生在某些计算机上 通过读取堆栈信息 当我在静态类中调用此静态方法 FormatQuery 时出现一些问题 using System using System Collections Generic using System Dat
  • 如何清除NiFi队列?

    我们正在 NiFi 中创建一些流 在某些情况下可能会建立队列 但由于某种原因 流无法按预期工作 在一天结束时 我想清除队列并以某种方式实现自动化 问题是我们如何从后端删除队列 我们有什么办法可以实现这一目标吗 除了 Bryan 提到的明确的
  • 在 Vaadin Flow 14 中过滤网格中的项目的简单示例

    我想抑制某些项目的显示GridVaadin Flow 14 中的小部件 例如 如果用户输入年份IntegerField小部件 我希望网格仅显示相关日期在那一年之前的项目 日期在该日期或之后的项目应该消失 如果用户更改年份数字 则应重新应用过