1
幫助我瞭解篩選和排序。 我使用one example過濾和another example將排序和篩選合併到React數據網格中
排序如果執行以下操作：
- 排序任何列
- 刪除排序
- 添加過濾任何列
- 刪除過濾器
如果你現在嘗試排序任何列，排序不起作用。 這是庫中的一個錯誤嗎？
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')
);
你能分享你寫的是結合了兩個例子的代碼？ –
嗨，歡迎來到堆棧溢出。請參考 [stackoverflow.com/help/how-to-ask](https://stackoverflow.com/help/how-to-ask）關於 的更多詳細信息，以瞭解如何提出問題並相應地更新您的問題。 –
我遇到了同樣的問題，我可以命中兩次，但第三次它會凍結並給我這個錯誤'TypeError：無法讀取未定義的屬性'片'。 –