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

最新推荐文章于 2024-05-23 08:48:09 发布
最新推荐文章于 2024-05-23 08:48:09 发布
阅读量8.4k 收藏 1
点赞数 1
分类专栏： React 文章标签： React table 升降序排序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouziyu2011/article/details/71189613
版权
tableBox.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,
摘要由CSDN通过智能技术生成

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：


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  筱葭
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
react-table:简单React可排序可搜索表

				
			

			

				

					05-01
				

			

		

		

			
				
React排序搜索表  丰满的 可搜寻的 可排序 寻呼机包括 使用自定义组件渲染特定的TD  React> = 16.8.2  react-dom> = 16.8.2 现场演示 现场演示： :  例子 需要更多示例吗？ 查看  包括字体 < link 	rel =" ...

			
		

	



                

              
                



	

		

			

				
					
react-data-sort:一个React组件来对数据进行排序和分页

				
			

			

				

					05-17
				

			

		

		

			
				
React数据排序
一个简单的react组件，可帮助您对数据列表进行排序和分页。
问题
您想要在表或列表中显示一组自定义数据，并希望能够对其进行排序和/或分页。 您还希望拥有样式自由和简单的API。
这个解决方案
带有组件（例如和React Router's 正变得越来越流行。 渲染道具模式为您提供了最大的灵活性，使您可以渲染和设置组件样式，因为渲染道具本身不会渲染任何东西。
 之所以创建这个组件，是因为我正在寻找一个React表组件，该组件将为我提供尽可能多的渲染和样式控制能力。 我找不到它，所以我决定自己建一个东西。 这是我的第一个开源React Component，非常欢迎任何反馈或贡献！
 注意：如果您需要渲染非常重要的数据集，那么性能非常重要，那么像这样的东西可能更合适。
目录
例子
去做
执照
 安装
该模块通过npm分发。 您可以使用npm安装它： 
 npm install

			
		

	



                


  
              

                


	

		

			

				
					
react中对对象数组进行排序

				
			

			

				

					qq_56392291的博客
				

				

					04-18
					
					2241
					
				

			

		

		

			
				
react中对对象数组进行排序

			
		

	





	

		

			

				
					
React 拖拽排序组件库对比研究

					
最新发布

				
			

			

				

					油墨香^-^的博客
				

				

					05-23
					
					301
					
				

			

		

		

			
				
react-dnddnd-kitreact-dnd文档齐全github star星数16.4k维护更新良好，最近一月内有更新维护学习成本较高功能中等移动端兼容情况，良好示例数量中等概念较多，使用复杂组件间能解耦文档齐全github star星数24.8k维护更新良好，最近三月内有更新维护学习成本较高使用易度中等功能丰富移动端兼容情况，优秀示例数量丰富是为垂直和水平列表专门构建的更高级别的抽象，没有提供 react-dnd 提供的广泛功能。

			
		

	



		

			
		



	

		

			

				
					
React Table 表格组件使用教程 排序、分页、搜索过滤筛选功能实战开发

				
			

			

				

					蒋川@卡拉云
				

				

					07-12
					
					6373
					
				

			

		

		

			
				
在日常开发中，特别是内部使用的后台系统时，我们常常会需要用表格来展示数据，同时提供一些操作用于操作表格内的数据。简单的表格直接用原生 HTML table 就好，但如果要在 React 中实现一个功能丰富的表格，其实是非常不容易的。在本站之前的文章《最好的 6 个 React Table 组件详细亲测推荐》 中有提到过 react-table 这个库，如果对这个库不太了解的同学可以先了解一下，这里不再赘述。简而言之，react-table 是一个非常强大的库，它与常见的表格组件不同，它不负责渲染 HTML 

			
		

	





	

		

			

				
					
react-redux实现升序降序排序

				
			

			

				

					前端小白成长记
				

				

					11-27
					
					2912
					
				

			

		

		

			
				
action.js
下面代码中的patientList是一个数据数组，比较patientList数组中的sirenId，然后patientList这一行数据也排序


export function upSort(patientList) {
  return async dispatch =&gt; {
    var sortarr = []
    for (var i = 0; i &lt...

			
		

	





	

		

			

				
					
react实现点击变色小功能

				
			

			

				

					qq_43373622的博客
				

				

					02-24
					
					4489
					
				

			

		

		

			
				
方法一：通过className添加类名的方式
当点击实现变色的时候，需要重新使用render函数进行渲染
<style>
    .isActive {
        background-color: red;
    }
</style>

<body>
    <div id="app">

    </div>
    <script type="text/babel">
        let arr = [1, 2, 3,

			
		

	





	

		

			

				
					
浅谈React Event实现原理

				
			

			

				

					01-19
				

			

		

		

			
				
并且 React 自己内部实现了一个合成事件，使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。 我们看一下这是怎么实现的...

			
		

	





	

		

			

				
					
浅谈react.js中实现tab吸顶效果的问题

				
			

			

				

					01-19
				

			

		

		

			
				
在react项目开发中有一个需求是，页面滚动到tab所在位置时，tab要固定在顶部。 实现的思路其实很简单，就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时，将tab的position变为fixed。 在react中，我...

			
		

	





	

		

			

				
					
浅谈redux以及react-redux简单实现

				
			

			

				

					10-18
				

			

		

		

			
				
reducer函数定义了状态如何根据不同的actions进行更新。在创建store后，可以通过`store.dispatch`方法派发actions，触发状态更新。在给出的代码中，`reducer.js`中的reducer函数处理了`USER_UPDATE`、`AGE_GROW`和`...

			
		

	





	

		

			

				
					
react + antd 表格排序（服务端返回数据）

				
			

			

				

					weixin_43954835的博客
				

				

					11-07
					
					3259
					
				

			

		

		

			
				
本地表格排序只需要按照文档描述在Column中加入属性sorter，写入排序方法即可。本地表格排序只能在当前页对显示的数据进行排序，如果想对所有的数据进行排序，需要使用后端返回的数据，这时候属性sorter就不能写入排序方法了，根据文档描述，要改成true。表格的onChange方法会在表格的分页、排序、筛选变化时触发，并且返回pagination, filters, sorter, extra: { currentDataSource: [] }，在排序这个需求中我们需要用到的就是sorter参数。

			
		

	





	

		

			

				
					
php点击按钮切换字体颜色,react.js实现动态字体颜色切换讲述

				
			

			

				

					weixin_36114091的博客
				

				

					03-20
					
					511
					
				

			

		

		

			
				
本篇文章讲述了react.js是如何实现动态字体颜色切换的，大家对于react.js实现动态字体颜色切换不太熟悉的同学可以和我们一起来看看本篇文章，废话少说，我们直接看看react.js是如何实现动态字体颜色切换的吧！有两种方式来实现动态切换字体颜色。第一种方式var LikeButton = React.createClass({getInitialState: function() {retu...

			
		

	





	

		

			

				
					
react点击实现文字变化

				
			

			

				

					m0_49471668的博客
				

				

					06-30
					
					596
					
				

			

		

		

			
				
react

			
		

	





	

		

			

				
					
react排序（sort）

				
			

			

				

					weixin_50805397的博客
				

				

					09-14
					
					3066
					
				

			

		

		

			
				
import React, { Component } from "react";
export default class App extends Component {
  state = {
    tableData: [
      {
        name: "John ll",
        score: 62.7,
      },
      {
        name: "John hh",
        score: 76,
      },
      {
       .

			
		

	





	

		

			

				
					
react： antd 中 table 排序问题

				
			

			

				

					1363648943的专栏
				

				

					04-04
					
					8771
					
				

			

		

		

			
				
Antd UI 框架。

场景：table 的排充功能。多个列排序，清除的时候清除状态。Table 中有排序：只针对于当页数据。

正常 table 如下：





有排序的table如下：



注释）

  1､columns 中 sortOrder 指的是受控模式



  2､只支持同时对同一列进行排序，确保只有一个 sortOrder 有效果。



场景一：针对正常...

			
		

	





	

		

			

				
					
React实现table拖拽排序功能

				
			

			

				

					
				

				

					07-15
					
					8273
					
				

			

		

		

			
				
1.使用antd的Table自带排序功能
参照官方文档： https://ant.design/components/table-cn/#components-table-demo-drag-sorting
2.使用sortablejs插件
可参照文档：https://segmentfault.com/a/1190000008209715
	//安装
	cnpm install sortablej...

			
		

	





	

		

			

				
					
react-umi-demo: 自定义实现Table组件支持自定义单字段或多字段排序

				
			

			

				

					YanHSama的博客
				

				

					12-07
					
					368
					
				

			

		

		

			
				
简略实现了表头排序标志，排序逻辑需要使用组件时进行自定义排序逻辑，处理好数据再传入组件
存在问题：已排序的前提下，再分页后的数据未进行排序组件实现
文件
文件
组件使用
文件
排序函数回调拿不到最新的值解决使用useRef

			
		

	





	

		

			

				
					
日期排序react_react+antd 步骤条改为时间顺序条

				
			

			

				

					weixin_34456923的博客
				

				

					01-13
					
					488
					
				

			

		

		

			
				
需求描述：返回四个时间，按照顺序展示，如果返回的时间相同，则在一个步骤点展示数据拿到数据：排序好的数据：处理好的数据：页面效果：代码实现：const getList = () => {const newList = stepList.sort((a, b) => Date.parse(a.time.replace(/-/g, '/')) - Date.parse(b.time.repl...

			
		

	





	

		

			

				
					
react 数组根据sort字段排序

				
			

			

				

					05-10
				

			

		

		

			
				
可以使用 JavaScript 的 `sort()` 方法来根据数组中的某个字段进行排序。假设你有一个包含以下对象的数组：  ```javascript const data = [  { id: 1, name: 'John', age: 25 },  { id: 2, name: 'Jane', age: 30 },...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值