XGrid 或 Data Grid：如何在工具栏中限制过滤器运算符？

Question

我在页面上设置了 Material-UI 的 XGrid，支持它的 API 仅支持“等于”作为过滤器运算符。如何隐藏工具栏中的其他运算符？

Screenshot of the toolbar

Answer 1

解决方案涉及

• 使用网格 api 提供的getGridStringOperators 访问内置的“字符串类型”过滤器

• 通过对这些过滤器的引用，继续并根据您的 api 支持的内容过滤它们

• 最后，将 column 属性设置为结果。

或者，您可以考虑创建一个自定义道具以在标题中显示您的搜索字段。

下面是代码的样子：

import {
  XGrid as DataGrid,
  getGridStringOperators,
} from '@material-ui/x-grid';

//-------------------------------------------------------------------------
// Column-related configuration
//
const filterOperators = getGridStringOperators().filter(({ value }) =>
  ['equals' /* add more over time */ ].includes(value),
);

const columns = [
  { field: 'id', headerName: 'ID', hide: true },
  {
    field: 'myEqualOnlyField',
    className: ['myEqualOnlyField'], // not required
    sortable: true, // not required
    filterOperators, // <<< required for what you want
    flex: 1, // not required
    // renderHeader: () => <SearchField />, <<< perhaps useful for a single, equal only option search  
  },
  {
    ...other fields/columns
  },
];

文档似乎没有为您想要完成的任务提供明确的示例。尽管如此，这里是related documentation 的链接。

最后，为了完善答案，如果您想添加自己的过滤器，即不属于内置过滤器的一个，here is a link。