自定义过滤器 ag 网格反应答案

【问题标题】：custom filter ag grid react自定义过滤器 ag 网格反应
【发布时间】：2020-07-08 22:26:28
【问题描述】：

我正在尝试使用 React 在 ag 网格中实现自定义 DropDown 过滤器。我关注的链接是link

我能够创建过滤器，但默认情况下不会显示过滤器。作为用户，我们需要单击列标题旁边的 3 箭头图标，然后过滤器就会出现。

有没有办法默认显示自定义过滤器下拉菜单？

【问题讨论】：

标签： reactjs filter ag-grid

【解决方案1】：

希望Floating filters能帮到你。

在 ag-grid documentation

中查看此示例

      filter: "agNumberColumnFilter",
      floatingFilterComponent: "sliderFloatingFilter",
      floatingFilterComponentParams: {
        maxValue: 5,
        suppressFilterButton: true
      },

示例显示sliderFloatingFilter，要使其成为下拉过滤器，我认为您需要为其创建自定义组件。

看看ag-grid团队如何在GitHub code

上制作TextFloatingFilterComp、DateFloatingFilterComp、NumberFloatingFilterComp等

希望这会有所帮助。

【讨论】：

我创建了一个新的 React 组件“ResourcesExposureFilter”，它呈现一个下拉过滤器。我在渲染 columnDef 下的网格时使用相同的组件，如下所示： headerName：“ExposureType”，字段：“exposure_type”，cellStyle：{textAlign：“center”}，过滤器：'dropDownFilter'，并设置 frameworkComponents：{ dropDownFilter： ResourcesExposureFilter } 下的状态变量。它实际上呈现下拉菜单，但仅当用户单击标题旁边的箭头图标时。我做得对吗？
您是否找到了另一种方法来在任何按钮单击时呈现过滤器，而不仅仅是标题中的那个？
你在问 - 喜欢这个吗？ Custom filter: can I have custom buttons for filter?

【解决方案2】：

我使用此列配置实现了下拉/枚举过滤器。我的情况是，我试图添加一个布尔过滤器。

这是一个完整的例子

https://codesandbox.io/s/ag-grid-react-enum-filter-q4er8?file=/src/App.js:1572-1599

const getEnumColumnParams = (enumMap) => {
  return {
    cellRenderer: (params) => {
      if (!params.data) return "";
      const { value } = params;
      return enumMap[value];
    },
    filterParams: {
      buttons: ['reset', 'apply'],
      closeOnApply: true,
      filterOptions: [
        "empty",
        ...Object.keys(enumMap).map(key => {
          return {
            displayKey: key,
            displayName: enumMap[key],
            test: function (filterValue, cellValue) {
              return cellValue === true;
            },
            hideFilterInput: true,
          };
        })
      ],
      suppressAndOrCondition: true,
    },
  };
};

const boolEnum = {
  true: 'Yes',
  false: 'No'
};

const colorEnum = {
  '#ff00000': 'Red',
  '#00ff00': 'Green',
  '#0000ff': 'Blue',
};

const columnDefs = [
  {
    field: 'available',
    ...getEnumColumnParams(boolEnum),
  },
  {
    field: 'color',
    ...getEnumColumnParams(colorEnum),
  }
];

或者您可以创建列类型并在列定义中分配 type: 'boolColumn' 等，就像我在上面的代码框示例中所做的那样

【讨论】：