如何在Data Grid中筛选出combinationId大于100的数据？

你遇到的问题是因为默认的FilteringState组件仅指定value时，只会执行精确匹配。要实现大于/大于等于的范围过滤，你需要给过滤器配置filterOperation参数，指定对应的操作符即可。

下面是修改后的完整代码示例，重点看第二个Grid的FilteringState配置：

class App extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = this.getCleanState(); 
    this.reload(); 
  } 

  getCleanState() { 
    return { 
      columns: [ 
        { name: "combinationId", title: "ID kombinace"}, 
        { name: "name", title: "Název kombinace"}, 
      ], 
      defaultColumnWidths: [ 
        { columnName: "combinationId", width: 160 }, 
        { columnName: "name", width: 200 }, 
      ], 
      rows:[] 
    }; 
  } 

  reload() { 
    axios.get('http://private-anon-27979f8bb8-bulgur.apiary-mock.com/api/v1/combinationInfo')
      .then((response) => { 
        this.loading = false; 
        var newState = {
          columns: this.state.columns, 
          rows: response.data 
            .map(x => x.combinations) 
            .reduce((a, b) => a.concat(b))
        }; 
        this.setState(newState); 
      }, (error) => { 
        this.loading = false; 
      }) 
  } 

  render() { 
    const { columns, rows, defaultColumnWidths } = this.state; 
    return ( 
      <div> 
        <div className="grids"> 
          <div className="patient-container"> 
            <Grid rows={rows} columns={columns}> 
              <Table /> 
              <TableColumnResizing defaultColumnWidths={defaultColumnWidths} /> 
              <TableHeaderRow /> 
            </Grid> 
          </div> 
          <div className="patient-container2"> 
            <Grid rows={rows} columns={columns}> 
              {/* 核心修改：添加filterOperation指定范围过滤 */}
              <FilteringState 
                defaultFilters={[
                  { 
                    columnName: "combinationId", 
                    value: 100, 
                    filterOperation: "gt" // 表示"大于（greater than）"
                  }
                ]} 
              /> 
              <IntegratedFiltering /> 
              <Table /> 
              <TableColumnResizing defaultColumnWidths={defaultColumnWidths} /> 
              <TableHeaderRow /> 
            </Grid> 
          </div> 
        </div> 
      </div>
    ) 
  } 
}

额外说明： #

• 如果需要大于等于的逻辑，把filterOperation改成"gte"即可；
• 要是你希望减少前端处理的数据量，也可以在数据加载阶段直接筛选，比如在reload方法里修改数据处理逻辑：

  rows: response.data 
    .map(x => x.combinations) 
    .reduce((a, b) => a.concat(b))
    .filter(item => item.combinationId > 100) // 直接过滤符合条件的数据
  

  这种方式适合数据量较大的场景，能避免不必要的数据渲染。

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