dx-react-grid 过滤器选项“等于”不起作用答案

【问题标题】：dx-react-grid filter option 'equal' not workingdx-react-grid 过滤器选项“等于”不起作用
【发布时间】：2019-02-13 09:37:11
【问题描述】：

我用 dx React Grid 创建了一个表格，在其中一列中，数据在 DataProvider 的帮助下显示为彩色空块，每种颜色对应于 1、2、3 中的一个数字, 4 或 5。

这是我的 Grid 实现 sn-p：

<Grid rows={rows} columns={columns}>
    <FilteringState />
    <SearchState />
    <RatingHeatmapProvider for={skillColumns}  />
    <IntegratedFiltering />
    //....
    <Table />
    <TableHeaderRow />
    <Toolbar />
    <SearchPanel />
    <TableFilterRow showFilterSelector iconComponent={FilterIcon} />
    //....
</Grid>

除了过滤器选项['equal', 'notEqual']，greaterThan、contains 等所有其他选项都有效。其他列中显示文本值的所有选项都有效。

在下图中，前 4 列对应于显示彩色块的那一列，最后一列是直接显示文本值的另一列。如您所见，filter = 3 应该向我展示绿色瓷砖，但它没有。即使greaterThanOrEqual 或lessThanOrEqual 也有效（图中未显示）

我该如何解决这个问题？

[编辑]：注意：正如我刚刚检查的那样，即使没有 DataProvider 和带状列，即直接显示数字，这个问题也存在。

【问题讨论】：

标签： reactjs devexpress devextreme

【解决方案1】：

我想您将“评分”作为“数字”存储在数据库中，不是吗？当 Grid 处理 'equal'/'notEqual' 过滤操作时，它会比较来自过滤器编辑器的值 (string) 和来自行的值 (number)。它会导致所描述的问题。这个问题已经fixed。该修复程序将在下一次更新中提供。

目前，您可以使用自定义谓词作为解决方法：

filteringColumnExtensions: [
  {
    columnName: "comumn_name",
    predicate: (value, filter) => {
      if (filter.operation === "equal") {
        return String(value) === filter.value;
      }
      // process other filter operations here...
    }
  }
]

Demo.

【讨论】：

仅针对此用例，将数字行值设为String(value) 也可以。感谢您的输入。欣赏它。