javascript - 将排序和过滤结合到React数据网格中

Question

帮助我了解过滤和排序。
我使用来自one example的过滤和来自another example的排序

如果执行以下操作：


对任何列进行排序
删除排序
为任何列添加过滤器
取下过滤器


如果您现在尝试对任何列进行排序，则排序将无法进行。
这是库中的错误吗？

const ReactDataGrid = require('react-data-grid');
const React = require('react');
const ReactDOM = require('react-dom');
const { Filters: { NumericFilter, AutoCompleteFilter, MultiSelectFilter, SingleSelectFilter }, 
        Data: { Selectors }} = require('react-data-grid-addons');

var weRows = [{"well":"1000","date":"10.02.2010","event":"Ремонт","comment":"Здесь должен быть комментарий","state":"ОСТАНОВЛЕНА"},{"well":"1000","date":"14.03.2010","event":"Очистка","comment":"","state":"В РАБОТЕ"},{"well":"1001","date":"20.04.2010","event":"Нормализация","comment":"","state":"В ОЖИДАНИИ ОСВОЕНИЯ"},{"well":"1002","date":"10.01.2011","event":"ОПЗ","comment":"Здесь должен быть комментарий","state":"В ПРОЕКТЕ"},{"well":"1003","date":"01.07.2010","event":"Перестрел","comment":"","state":"В РАБОТЕ"},{"well":"1004","date":"20.04.2010","event":"Дострел","comment":"","state":"В РАБОТЕ"},{"well":"1004","date":"10.02.2010","event":"Ремонт","comment":"Здесь должен быть комментарий","state":"ОСТАНОВЛЕНА"},{"well":"1004","date":"14.03.2010","event":"Очистка","comment":"","state":"В РАБОТЕ"},{"well":"1005","date":"20.04.2010","event":"Нормализация","comment":"","state":"В РАБОТЕ"},{"well":"1005","date":"10.02.2010","event":"ОПЗ","comment":"","state":"В РАБОТЕ"},{"well":"1006","date":"14.03.2010","event":"Перестрел","comment":"","state":"В РАБОТЕ"},{"well":"1007","date":"20.04.2010","event":"Дострел","comment":"","state":"В ОЖИДАНИИ ОСВОЕНИЯ"},{"well":"1007","date":"10.02.2010","event":"Ремонт","comment":"Здесь должен быть комментарий","state":"В РАБОТЕ"},{"well":"1008","date":"14.03.2010","event":"Очистка","comment":"","state":"В ОЖИДАНИИ ОСВОЕНИЯ"},{"well":"1008","date":"20.04.2010","event":"Нормализация","comment":"","state":"ОСТАНОВЛЕНА"},{"well":"1009","date":"10.02.2010","event":"Перестрел","comment":"","state":"В ОЖИДАНИИ ОСВОЕНИЯ"},{"well":"1009","date":"14.03.2010","event":"Дострел","comment":"Здесь должен быть комментарий","state":""},{"well":"1010","date":"20.04.2010","event":"Ремонт","comment":"Здесь должен быть комментарий","state":"В РАБОТЕ"},{"well":"1011","date":"10.02.2010","event":"Очистка","comment":"","state":"В РАБОТЕ"},{"well":"1012","date":"14.03.2010","event":"Нормализация","comment":"","state":"ОСТАНОВЛЕНА"},{"well":"1012","date":"20.04.2010","event":"ОПЗ","comment":"Здесь должен быть комментарий","state":"В РАБОТЕ"},{"well":"1013","date":"10.02.2010","event":"Перестрел","comment":"","state":"В РАБОТЕ"},{"well":"1014","date":"14.03.2010","event":"Дострел","comment":"Здесь должен быть комментарий","state":"В РАБОТЕ"},{"well":"1015","date":"20.04.2010","event":"Ремонт","comment":"","state":"ОСТАНОВЛЕНА"},{"well":"1016","date":"10.02.2010","event":"Очистка","comment":"","state":"В ОЖИДАНИИ ОСВОЕНИЯ"},{"well":"1017","date":"14.03.2010","event":"Нормализация","comment":"","state":"В РАБОТЕ"},{"well":"1017","date":"20.04.2010","event":"ОПЗ","comment":"Здесь должен быть комментарий","state":"В РАБОТЕ"},{"well":"1018","date":"10.02.2010","event":"Перестрел","comment":"","state":"В РАБОТЕ"},{"well":"1019","date":"14.03.2010","event":"Дострел","comment":"","state":"В ОЖИДАНИИ ОСВОЕНИЯ"},{"well":"1020","date":"20.04.2010","event":"Ремонт","comment":"Здесь должен быть комментарий","state":"В РАБОТЕ"}];

var weColumns = [{"key":"well","name":"Скважина"},
                 {"key":"date","name":"Дата"},
                 {"key":"event","name":"Событие"},
                 {"key":"comment","name":"Комментарий"},
                 {"key":"state","name":"Состояние"}];


const Example = React.createClass({
      getInitialState() {
        this.createColumns();

        let originalRows = weRows;
        let rows = originalRows.slice(0);

        return {originalRows,
                rows,
                filters: {},
                groupBy: [], 
                expandedRows: {}};
      },

      createColumns() {
        let c = [];
        for (let i = 0; i < weColumns.length; i++) {

          c.push({
            key: weColumns[i].key,
            name: weColumns[i].name,
            resizable: true,
            sortable: true,
            filterable: true,
            filterRenderer: MultiSelectFilter
          });
        }

        this._columns = c;
      },

      handleGridSort(sortColumn, sortDirection) {     
        const comparer = (a, b) => {
          var aValue = a[sortColumn];
          var bValue = b[sortColumn];  

          if (sortColumn === "date")
          {
            var aSplit = a[sortColumn].split('.');
            var aDate = new Date(aSplit[2], aSplit[1] - 1, aSplit[0]); 
            var aValue = aDate.valueOf();

            var bSplit = b[sortColumn].split('.');
            var bDate = new Date(bSplit[2], bSplit[1] - 1, bSplit[0]); 
            var bValue = bDate.valueOf();
          };

          if (sortDirection === 'ASC') {
              return (aValue > bValue) ? 1 : -1;
            } else if (sortDirection === 'DESC') {
              return (aValue < bValue) ? 1 : -1;
            }
        };

        const rows = sortDirection === 'NONE' ? this.state.originalRows.slice(0) : this.state.rows.sort(comparer);

        this.setState({rows});
      },

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

      rowGetter(i) {        
        const rows = this.getRows();
        return rows[i];
      },

      rowsCount() {
        return this.getRows().length;
      },

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

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

      handleOnClearFilters() {
        this.setState({ filters: {} });
      },


      render() {
        return ( 

            <ReactDataGrid

              enableCellSelect={true}
              columns = {this._columns}
              rowGetter = {this.rowGetter}
              rowsCount = {this.rowsCount()}
              canFilter={true}

              minHeight =  {this.state.rows.length * 35 + 80}

              onAddFilter={this.handleFilterChange}
              getValidFilterValues={this.getValidFilterValues}
              onClearFilters={this.handleOnClearFilters}

              onGridSort = {this.handleGridSort}             

            />  
          );
        }
      });

    ReactDOM.render(< Example /> , document.getElementById('cntTable')
    );

Answer 1

您为什么不使用结合了排序和过滤功能的官方示例？

现场演示：
http://adazzle.github.io/react-data-grid/examples.html#/filterable-sortable-grid

这是源代码：
http://adazzle.github.io/react-data-grid/scripts/example16-filterable-sortable-grid.js