Aggrid setFilterModel 语法问题

Question

我正在使用 Aggrid 来显示带有服务器端渲染和自定义侧边栏过滤器的大型表格。排序按预期工作，并且通过一些哄骗，我成功地实现了文本过滤功能。但是，我在过滤数字列时遇到了问题。

我在网上找到了以下代码/提示：

const onFilterChange = async (params) => {

  let newFilterModel = {
    [params.id]: {
      filterType: "number",
      type: "lessThan",
      filter: 9,
    },
  };
  gridApi.setFilterModel(newFilterModel);

  // Refresh the data
  gridApi.onFilterChanged();
};

这会生成一个包含以下内容的查询：

filters : {fct_rx.total_unique_patients: '9'}

缺少重要的操作信息。我的数据库查询所需的格式是

{"fct_rx.total_unique_patients": "<9",}

我正在使用 setFilterModel 和 onFilterChanged 强制重新渲染 SSR，但也许还有另一个？

有没有办法用 setFilterModel 来做到这一点，或者有没有办法直接静态设置过滤器？或者甚至传递更多信息

Answer 1

1. 创建自定义过滤器组件 允许您指定过滤器类型（例如，小于、大于、等于）和过滤器值

import React from 'react';

const CustomNumberFilter = (props) => {
  const [filterValue, setFilterValue] = React.useState('');
  const [filterType, setFilterType] = React.useState('lessThan');

  const onFilterChanged = () => {
    const filterModel = {
      filterType: 'number',
      type: filterType,
      filter: filterValue,
    };
    props.filterChangedCallback(filterModel);
  };

  return (
    <div>
      <input
        type="number"
        value={filterValue}
        onChange={(e) => setFilterValue(e.target.value)}
      />
      <select
        value={filterType}
        onChange={(e) => setFilterType(e.target.value)}
      >
        <option value="lessThan">Less Than</option>
        <option value="greaterThan">Greater Than</option>
        <option value="equal">Equal To</option>
      </select>
      <button onClick={onFilterChanged}>Apply Filter</button>
    </div>
  );
};

export default CustomNumberFilter;

2. 将自定义过滤器与 AG Grid 集成 进入AG Grid的列定义

const columnDefs = [
  {
    headerName: 'Total Unique Patients',
    field: 'fct_rx.total_unique_patients',
    filter: 'customNumberFilter',
    filterParams: {
      filterChangedCallback: (model) => {
        const newFilterModel = {
          [model.colId]: model,
        };
        gridApi.setFilterModel(newFilterModel);
        gridApi.onFilterChanged();
      },
    },
  },
  // other column definitions
];

3. 注册自定义过滤器组件 在网格选项中

const gridOptions = {
  components: {
    customNumberFilter: CustomNumberFilter,
  },
  // other grid options
};

4. 格式化数据库查询的过滤器模型 调整过滤器模型以确保其格式正确适合您的数据库查询

const onFilterChanged = (params) => {
  const newFilterModel = {
    [params.colId]: {
      filterType: 'number',
      type: params.type,
      filter: params.filter,
    },
  };
  gridApi.setFilterModel(newFilterModel);
  gridApi.onFilterChanged();

  // Format the filter model for your database query
  const dbFilterModel = {};
  Object.keys(newFilterModel).forEach((key) => {
    const filter = newFilterModel[key];
    if (filter.type === 'lessThan') {
      dbFilterModel[key] = `<${filter.filter}`;
    } else if (filter.type === 'greaterThan') {
      dbFilterModel[key] = `>${filter.filter}`;
    } else if (filter.type === 'equal') {
      dbFilterModel[key] = `${filter.filter}`;
    }
  });

  // Use dbFilterModel to query your database
  console.log(dbFilterModel);
};

此方法允许您抑制默认过滤器行为并提供更灵活和可定制的过滤体验。