浅谈React实现table根据不同字段升降序排序
tableBox.html：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="tableBox.css"> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="build/browser.min.js"></script> </head> <body> <div id="tableBox"></div> <script type="text/babel" src="tableBox.jsx"></script> </body> </html>
tableBox.jsx：
var data = [
{name: "Bruce", age: 23, id: 16, score: 80},
{name: "Alice", age: 24, id: 12, score: 90},
{name: "David", age: 21, id: 11, score: 70},
{name: "Cindy", age: 22, id: 10, score: 100},
];
var flag = {
name: true,
age: true,
id: true,
score: true
};
function upSort(propertyName) {
if ((typeof data[0][propertyName]) != "number") {
return function(object1, object2) {
var value1 = object1[propertyName];
var value2 = object2[propertyName];
return value1.localeCompare(value2);
}
}
else {
return function(object1, object2) {
var value1 = object1[propertyName];
var value2 = object2[propertyName];
return value1 - value2;
}
}
}
function downSort(propertyName) {
if ((typeof data[0][propertyName]) != "number") {
return function(object1, object2) {
var value1 = object1[propertyName];
var value2 = object2[propertyName];
return value2.localeCompare(value1);
}
}
else {
return function(object1, object2) {
var value1 = object1[propertyName];
var value2 = object2[propertyName];
return value2 - value1;
}
}
}
var TableBox = React.createClass({
getInitialState: function() {
return {data:this.props.data};
},
sort: function(e) {
var prop = e.target.innerHTML;
if (flag[prop] == true)
this.state.data.sort(upSort(prop));
else
this.state.data.sort(downSort(prop));
flag[prop] = !flag[prop];
this.setState({data:this.state.data});
},
render: function() {
return (
<table>
<thead>
<tr>
<th onClick={this.sort}>name</th>
<th onClick={this.sort}>age</th>
<th onClick={this.sort}>id</th>
<th onClick={this.sort}>score</th>
</tr>
</thead>
<tbody>
{
this.state.data.map(function(item, index) {
return (
<tr key={index}>
<td>{item.name}</td>
<td>{item.age}</td>
<td>{item.id}</td>
<td>{item.score}</td>
</tr>
);
})
}
</tbody>
</table>
);
}
})
ReactDOM.render(
<TableBox data={data}/>,
document.getElementById("tableBox")
);
JavaScript对象数组根据某属性sort升降序排序的具体实现请见：http://blog.csdn.net/zhouziyu2011/article/details/71189124
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： Js中利用ES6特性的数组排序及求最大（小）值的多种方案
- 下一篇： 数组的排序
