XGrid 或数据网格：如何限制工具栏中的过滤器运算符？

Question

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

工具栏的屏幕截图

Answer 1

解决方案涉及

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

• 参考这些过滤器，继续过滤它们以获得您的 api 支持的内容

• 最后，用结果设置列属性。

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

代码可能如下所示：

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
  },
];

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

最后，为了完善答案，如果您想添加自己的过滤器（即不属于内置过滤器的过滤器），请参阅以下链接。