对数组和索引进行排序
Sorting arrays and indexes
我在对固定数据表进行排序时遇到问题。我尝试使用此示例:https://github.com/facebook/fixed-data-table/blob/master/examples/old/SortExample.js
当我第一次按名称降序排序时,它成功排序并将前两行带到这些值:
编号:11 姓名:玛丽
ID:1 姓名:玛丽
....
之后,我按名称升序排序,然后再次按名称降序排序。
它为前两列带来了这些值:
ID:1 姓名:玛丽
编号:11 姓名:玛丽
....
为什么它会更改同名值的索引?(编号:11 和 id:1)
我每次都需要相同的排序索引。问题是什么,我该如何解决?
var SortTypes = {
ASC: 'ASC',
DESC: 'DESC',
};
function renderDate(/*object*/ cellData) {
return <span>{cellData.toLocaleString()}</span>;
}
var SortExample = React.createClass({
getInitialState() {
return {
rows: [{"id":"1","name":"Mary"},{"id":"2","name":"Felix"},
{"id":"3","name":"Mary"},{"id":"4","name":"Felix"},
{"id":"5","name":"Mary"},{"id":"6","name":"Felix"},
{"id":"7","name":"Mary"},{"id":"8","name":"Felix"},
{"id":"9","name":"Mary"},{"id":"10","name":"Felix"},
{"id":"11","name":"Mary"},{"id":"12","name":"Felix"},
{"id":"13","name":"Mary"},{"id":"14","name":"Felix"},
{"id":"15","name":"Mary"},{"id":"16","name":"Felix"},
{"id":"17","name":"Mary"},{"id":"18","name":"Felix"} ,
{"id":"19","name":"Mary"},{"id":"20","name":"Felix"}],sortBy: 'id',
sortDir: null,
};
},
_rowGetter(rowIndex) {
return this.state.rows[rowIndex];
},
_sortRowsBy(cellDataKey) {
var sortDir = this.state.sortDir;
var sortBy = cellDataKey;
if (sortBy === this.state.sortBy) {
sortDir = this.state.sortDir === SortTypes.ASC ? SortTypes.DESC : SortTypes.ASC;
} else {
sortDir = SortTypes.DESC;
}
var rows = this.state.rows.slice();
rows.sort((a, b) => {
var sortVal = 0;
if (a[sortBy] > b[sortBy]) {
sortVal = 1;
}
if (a[sortBy] < b[sortBy]) {
sortVal = -1;
}
if (sortDir === SortTypes.DESC) {
sortVal = sortVal * -1;
}
return sortVal;
});
this.setState({
rows,
sortBy,
sortDir,
});
},
_renderHeader(label, cellDataKey) {
return (
<a onClick={this._sortRowsBy.bind(null, cellDataKey)}>{label}</a>
);
},
render() {
var sortDirArrow = '';
if (this.state.sortDir !== null){
sortDirArrow = this.state.sortDir === SortTypes.DESC ? ' ↓' : ' ↑';
}
return (
<Table
rowHeight={50}
rowGetter={this._rowGetter}
rowsCount={this.state.rows.length}
headerHeight={50}
width={1000}
height={500}
{...this.props}>
<Column
headerRenderer={this._renderHeader}
label={'id' + (this.state.sortBy === 'id' ? sortDirArrow : '')}
width={100}
dataKey='id'
/>
<Column
headerRenderer={this._renderHeader}
label={'First Name' + (this.state.sortBy === 'name' ? sortDirArrow : '')}
width={200}
dataKey='name'
/>
</Table>
);
},
});
ReactDOM.render(
<SortExample/>,
document.getElementById('app')
)
对于稳定的排序,您需要更多排序参数,例如此解决方案,该参数首先按name
排序,然后按id
排序。
var rows = [{ "id": "1", "name": "Mary" }, { "id": "2", "name": "Felix" }, { "id": "3", "name": "Mary" }, { "id": "4", "name": "Felix" }, { "id": "5", "name": "Mary" }, { "id": "6", "name": "Felix" }, { "id": "7", "name": "Mary" }, { "id": "8", "name": "Felix" }, { "id": "9", "name": "Mary" }, { "id": "10", "name": "Felix" }, { "id": "11", "name": "Mary" }, { "id": "12", "name": "Felix" }, { "id": "13", "name": "Mary" }, { "id": "14", "name": "Felix" }, { "id": "15", "name": "Mary" }, { "id": "16", "name": "Felix" }, { "id": "17", "name": "Mary" }, { "id": "18", "name": "Felix" }, { "id": "19", "name": "Mary" }, { "id": "20", "name": "Felix" }];
rows.sort(function (a, b) {
return a.name.localeCompare(b.name) || a.id - b.id;
});
document.write('<pre>' + JSON.stringify(rows, 0, 4) + '</pre>');
相关文章:
- Javascript排序索引链接数组
- Javascript中的多维数组排序索引问题
- 谷歌地图上的排序/z索引覆盖
- Javascript表排序工作得很好,但对所有索引进行迭代会得到不同的结果
- 对对象保持索引中的值进行排序
- 如何在对象中按值创建排序索引数组
- 根据对象属性对 JavaScript 对象进行排序,但维护索引
- 动态 jquery ui 可排序块的索引/位置
- jQuery - 获取可排序列表的索引
- Javascript 数组 // 从指定索引开始对数组重新排序,同时保持原始顺序
- 如果关联数组从正则表达式返回,则对索引进行排序
- 排序方法和索引
- 对数组和索引进行排序
- 车把:在保留原始排序索引的同时对列表进行排序
- 在 jquery 可排序后定义
- 元素
- 元素的索引
- 元素
- JavaScript 复杂的排序,基于最终排序索引的多个键
- 如何在ExtJS存储中获取记录的预排序索引
- SVG重新排序z索引(Raphael可选)
- 反向排序数组的排序索引
- 根据数组'的排序索引对数组进行排序