浅谈React实现table根据不同字段升降序排序

太过爱你忘了你带给我的痛 2022-06-16 04:10 506阅读 0赞

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][http_blog.csdn.net_zhouziyu2011_article_details_71189124]

[http_blog.csdn.net_zhouziyu2011_article_details_71189124]: http://blog.csdn.net/zhouziyu2011/article/details/71189124

发表评论取消回复

表情：

评论列表（有 0 条评论，506人围观）

还没有评论，来说两句吧...

相关阅读

相关浅谈React mixins

组件是React复用代码的最佳方式，但有时一些不同的组件间也需要共用一些功能，被称为跨切面关注点，React使用 mixins 来解决这类问题。一个通用的场景是：一个组件

港控/mmm°/ 2022年06月17日 13:44/ 0 赞/ 330 阅读

相关浅谈React实现过滤器

思路： 1、在最顶层组件中创建state； 2、监听底层组件的输入框和多选按钮的onchange事件，借助this.prop通过函数传递输入框和多选按钮的值给上层组件；

喜欢ヅ旅行/ 2022年06月17日 12:17/ 0 赞/ 380 阅读

相关浅谈React实现输入框

组件要实现的功能： 1、定制label和输入框的placeholder的内容； 2、输入的内容不符合正则表达式要求时，输入框标红，符合时标绿； 3、点击清除按钮后，按钮消

浅浅的花香味﹌/ 2022年06月17日 12:06/ 0 赞/ 464 阅读

相关浅谈React实现搜索匹配

search.html： <!DOCTYPE html> <html> <head> <link rel="stylesheet" hr

傷城~/ 2022年06月17日 09:18/ 0 赞/ 310 阅读

相关浅谈React实现todolist

todoList.html： <!DOCTYPE html> <html> <head> <link rel="styleshee

爱被打了一巴掌/ 2022年06月17日 09:18/ 0 赞/ 321 阅读

相关浅谈React实现table根据不同字段升降序排序

tableBox.html： <!DOCTYPE html> <html> <head> <link rel="stylesheet"

太过爱你忘了你带给我的痛/ 2022年06月16日 04:10/ 0 赞/ 507 阅读

相关浅谈JavaScript对象数组根据某属性sort升降序排序

1、自定义一个比较器，其参数为待排序的属性。 2、将带参数的比较器传入sort()。 var data = [ {name: "Bruce", age:

阳光穿透心脏的1/2处/ 2022年06月16日 04:09/ 0 赞/ 294 阅读

相关浅谈React Hooks

> 由于工作的原因我已经很长时间没接触过React了。前段时间圈子里都在讨论React Hooks，出于好奇也学习了一番，特此整理以加深理解。缘由在web应用无所不

古城微笑少年丶/ 2022年03月06日 05:18/ 0 赞/ 419 阅读

相关 SQL ORDER BY 子句【排序】升降序

ORDER BY 语句一般是对指定的列进行排序，默认按照升序对记录进行排序。如果想要降序利用DESC关键字对记录进行降序。 ![watermark_type_ZmFuZ3

比眉伴天荒/ 2022年01月26日 00:33/ 0 赞/ 386 阅读

相关 Map实现按照Key的升降序和按照Value的升降序

1.TreeMap按照Key排序，默认为升序 2.将TreeMap按照Key降序则需要传入Comparator对象，重写compare方法。 3.按照Value排序则需

小鱼儿/ 2021年09月26日 16:16/ 0 赞/ 424 阅读