【问题标题】:ag-grid: Create a filter drop-down on column values?ag-grid:在列值上创建过滤器下拉列表?
【发布时间】:2020-01-30 03:10:43
【问题描述】:

我正在尝试将下拉过滤器添加到 ag-grid 中的列。我已经设法使用此代码(在 Angular 8 应用程序中)显示该列:

  columnDefs = [
{ headerName: 'Id'              , field: 'id'              , type: 'number' },
{ headerName: 'Message'         , field: 'message'         , type: 'text' },
{ headerName: 'Level'           , field: 'level'           , type: 'text' , width: 90,
  filterParams: {
    filterOptions: [
      'empty',
      {
        displayKey: 'errors',
        displayName: 'Errors',
        test: (cellValue)  => cellValue != null && cellValue === 'Error'
      },
      {
        displayKey: 'info',
        displayName: 'Information',
        test: (cellValue) => cellValue != null && cellValue === 'Information'
      },
      {
        displayKey: 'verbose',
        displayName: 'Verbose',
        test: (cellValue) => cellValue == null && cellValue === 'Verbose'
      },
    ],
    applyButton: true,
    clearButton: true,
    debounceMs: 200,
    suppressAndOrCondition: true
  }
},
{ headerName: 'Source'          , field: 'source'          , type: 'text' , width: 80 }  ];

当我单击列上的汉堡菜单时,这给了我一个下拉菜单。但是,当我从上面选择一个选项时,我只会在它下面得到一个文本字段,我必须在其中输入要过滤的文本。我要做的只是选择其中一个选项,例如“错误”,它会自动按该测试功能过滤网格。那可能吗?看起来很简单,但是我花了一整天的时间阅读文档并尝试不同的东西,但似乎没有任何效果......

谢谢!

【问题讨论】:

    标签: angular ag-grid ag-grid-angular


    【解决方案1】:

    根据https://www.ag-grid.com/javascript-grid-filter-provided-simple/#customFilterOptions 的文档,“测试”函数有两个参数——过滤器值和单元格值。

    您似乎还没有指定过滤器类型。

    【讨论】:

    • 谢谢 - 绝对有助于将我推向正确的方向,但是当我查看您引用的页面上的实际示例代码时,我看不到 filterValue 是如何设置的。它只是我要过滤的字符串吗?我确实发现我可以隐藏过滤器的输入,但是当我从下拉列表中选择一个项目时它实际上并没有过滤网格,而且我不确定如何定义过滤器应该是什么......
    猜你喜欢
    • 2018-02-06
    • 2016-08-21
    • 2020-09-27
    • 1970-01-01
    • 2023-03-27
    • 1970-01-01
    • 2021-09-11
    • 2020-04-08
    • 2021-12-18
    相关资源
    最近更新 更多