如何移除React版Kendo-react-grid中的部分默认筛选器

针对kendo-react-grid 7.2.3版本，你可以通过Grid组件的**filterOperators顶层属性**全局配置所有列的筛选操作符，无需逐个列单独设置。

核心思路 #

filterOperators接收一个对象，键为数据类型（如string、number、date），值为该类型保留的筛选操作符数组。我们只需要移除对应类型中isnull和isnotnull相关的操作符即可。

实现代码 #

方式1：基于预设操作符过滤

直接复用Kendo提供的预设操作符，过滤掉不需要的选项：

import { Grid } from '@progress/kendo-react-grid';
import { stringFilterOperators, numberFilterOperators, dateFilterOperators } from '@progress/kendo-react-data-tools';

// 移除字符串类型的null相关筛选
const customStringOps = stringFilterOperators.filter(op => 
  op.operator !== 'isnull' && op.operator !== 'isnotnull'
);

// 移除数字类型的null相关筛选
const customNumberOps = numberFilterOperators.filter(op => 
  op.operator !== 'isnull' && op.operator !== 'isnotnull'
);

// 移除日期类型的null相关筛选
const customDateOps = dateFilterOperators.filter(op => 
  op.operator !== 'isnull' && op.operator !== 'isnotnull'
);

// 全局筛选操作符配置
const globalFilterOps = {
  string: customStringOps,
  number: customNumberOps,
  date: customDateOps
};

// 在Grid中应用配置
<Grid
  data={yourDataSource}
  filterable={true}
  filterOperators={globalFilterOps}
  columns={yourColumnDefinitions}
/>

方式2：手动定义操作符（更灵活）

如果需要自定义筛选选项的显示文本，可直接手动构建操作符数组：

import { Grid } from '@progress/kendo-react-grid';

const globalFilterOps = {
  string: [
    { text: '包含', operator: 'contains' },
    { text: '不包含', operator: 'doesnotcontain' },
    { text: '等于', operator: 'eq' },
    { text: '不等于', operator: 'neq' },
    { text: '开头为', operator: 'startswith' },
    { text: '结尾为', operator: 'endswith' }
  ],
  number: [
    { text: '等于', operator: 'eq' },
    { text: '不等于', operator: 'neq' },
    { text: '大于', operator: 'gt' },
    { text: '大于等于', operator: 'gte' },
    { text: '小于', operator: 'lt' },
    { text: '小于等于', operator: 'lte' }
  ]
};

<Grid
  data={yourDataSource}
  filterable={true}
  filterOperators={globalFilterOps}
  columns={yourColumnDefinitions}
/>

注意事项 #

• 确保Grid开启了filterable={true}，否则筛选功能不会生效。
• 该配置会对所有列生效，若某列需要特殊配置，可在列定义中单独设置filterOperators（会覆盖全局配置）。

内容的提问来源于stack exchange，提问作者Loudrous