0

我正在尝试为我的表中包含用例的数值的列实现下拉过滤器（Singleselect/multiselect/autocpmplete），但在 react-data-grid 版本 2.0.0 和 react-data-grid-addons 版本中2.0.0 我无法做到这一点。有什么解决办法吗？并且自动完成过滤器仅适用于具有字符串值的列。在下面的代码中，Singleselect 过滤器根本不起作用，ftPad、ptmPad 等具有数值的列，如果我应用自动完成过滤器，它也不起作用，但是，它适用于字符串值。在具有数值的列上实现此过滤器的任何解决方法？

import React, { Component } from 'react';
import ReactDataGrid from "react-data-grid";
import { Toolbar, Data, Filters} from "react-data-grid-addons";

const Selectors = Data.Selectors;
const AutoCompleteFilter = Filters.AutoCompleteFilter;
const NumericFilter = Filters.NumericFilter;
const SingleSelectFilter = Filters.SingleSelectFilter;

export default class PadMonitoringReport extends Component {
  constructor(props) {
     super(props);
     this._columns = [
    {
        key: 'nodeId',
        name: 'WarehouseId',
        sortable: true,
        filterable: true,
        filterRenderer: SingleSelectFilter
    },
    {
        key: 'nodeType',
        name: 'Node Type',
        filterable: true,
        sortable: true,
        resizable: true,
        filterRenderer: AutoCompleteFilter
    },
    {
        key: 'backlog',
        name: 'Backlog',
        sortable: true,
        filterable: true,
        filterRenderer: NumericFilter
    },
    {
        key: 'ptmPad',
        name: 'PTM Pad',
        filterable: true,
        sortable: true,
        filterRenderer: NumericFilter
    },
    {
        key: 'ftPad',
        name: 'FT Pad',
        filterable: true,
        sortable: true,
        filterRenderer: NumericFilter
    },
    {
        key: 'maxCPTRisk',
        name: 'Max CPT Risk',
        sortable: true,
        filterable: true,
        filterRenderer: NumericFilter
    },
    {
        key: 'pickToManifestTimeInSeconds',
        name: 'Pick to manifest (time in sec)',
        sortable: true,
        filterable:true,
        filterRenderer: NumericFilter
    }
    ];
    this.state = {
        rows: props.data,
        filters: {},
        sortColumn: null, 
        sortDirection: null
    };
    this.rowGetter = this.rowGetter.bind(this);
    this.handleGridSort = this.handleGridSort.bind(this);
    this.handleFilterChange = this.handleFilterChange.bind(this);
    this.onClearFilters = this.onClearFilters.bind(this);
    this.getRows = this.getRows.bind(this);
    this.getSize = this.getSize.bind(this);
    this.getValidFilterValues = this.getValidFilterValues.bind(this);
}

getRows() {
   return Selectors.getRows(this.state);
}

getSize() {
    return this.getRows().length;
}

rowGetter(i) {
    //console.log("it is............")
    //console.log(this.state.rows[i])
    let rows = this.getRows();
    return rows[i];
}

handleGridSort(sortColumn, sortDirection) {
    this.setState({ sortColumn: sortColumn, sortDirection: sortDirection });
}

handleFilterChange(filter) {
    let newFilters = Object.assign({}, this.state.filters);
    if (filter.filterTerm) {
        newFilters[filter.column.key] = filter;
    } else {
        delete newFilters[filter.column.key];
    }
    this.setState({ filters: newFilters });
}

onClearFilters() {
    // all filters removed
    this.setState({filters: {} });
}

getValidFilterValues(columnId) {
   let values = this.state.rows.map(r => r[columnId]);
   return values.filter((item, i, a) => { return i === a.indexOf(item); });
}

render() {
   return  (
   <div>
      <ReactDataGrid
           onGridSort={this.handleGridSort}
           enableCellSelect={true}
           columns={this._columns}
           rowGetter={this.rowGetter}
           rowsCount={this.getSize()}
           toolbar={<Toolbar enableFilter={true}/>}
           onAddFilter={this.handleFilterChange}
           getValidFilterValues={this.getValidFilterValues}
           onClearFilters={this.onClearFilters} 
      />
    </div>  
           );
}

}
4

1 回答 1

1

我不知道它现在是否相关，我遇到了这个问题并解决了它。您需要将数字数组转换为字符串数组以获得getValidFilterValues 道具

例如：

getValidFilterValues={this.getValidFilterValues}

getValidFilterValues = (columnId) => {
    let values = this.state.rows.map(r => r[columnId]);
    var r = values.filter((item, i, a) => { 
        return i === a.indexOf(item); 
    });
    return r.map(v => v.toString());
};
于 2018-08-08T07:44:34.900 回答