问题
Help me understand the filtering and sorting. I use the filtering from one example and the sorting from another example
If you perform the following actions:
- Sort any column
- Remove the sorting
- Add a filter for any column
- Remove the filter
If you now try to sort any column, the sorting does not work. Is this a bug in the library?
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')
);
回答1:
Why don't you use the official example which combines sorting and filtering?
Live demo: http://adazzle.github.io/react-data-grid/examples.html#/filterable-sortable-grid
Here is the source code: http://adazzle.github.io/react-data-grid/scripts/example16-filterable-sortable-grid.js
来源：https://stackoverflow.com/questions/44705938/combining-sorting-and-filtering-into-react-data-grid