antd table按表格里的日期去排序操作


Posted in Javascript onNovember 17, 2020

表格内容

根据票据日期升序(这里是已经排序后的效果)

antd table按表格里的日期去排序操作

上代码

antd table按表格里的日期去排序操作

代码中data的内容如下

antd table按表格里的日期去排序操作

根据paper_date排序,因为目前这种格式不支持比较,需要先转换成时间戳

new Date(aTimeString).getTime()

之后再用装换后的时间戳去比较,比较用到的函数是 .sort,一下是用来比较的代码

data.sort(function(a, b) {
      let aTimeString = a.paper_date;
      let bTimeString = b.paper_date;
      let aTime = new Date(aTimeString).getTime();
      let bTime = new Date(bTimeString).getTime();
      return aTime - bTime;
     });

附:知识用来记录自己遇到的问题解决方法,大神勿喷

补充知识:antd的Table后端排序(列升降序)的坑

antd Table列升降序需要有个sorter属性

由于分页是后端分页,因此,排序也必须用后端排序(因为前端获取到的数据只有一页,无法正确排序)

sorter: (a, b) => { // 啥也不写,不需要前端排序,写了sorter才会出现排序图标},

这里会碰到一个坑,接口请求回来的数据明明已经排序正确了,传给dataSource也是正常的,为什么渲染出来的是错的? 因为前端又不完整的自行排序了一次

这时候sorter就不该写成回调函数形式,而应该写成sorter: true

const columns = [{
 title: 'Name',
 dataIndex: 'name',
 filters: [{
  text: 'Joe',
  value: 'Joe',
 }, {
  text: 'Jim',
  value: 'Jim',
 }, {
  text: 'Submenu',
  value: 'Submenu',
  children: [{
   text: 'Green',
   value: 'Green',
  }, {
   text: 'Black',
   value: 'Black',
  }],
 }],
 // specify the condition of filtering result
 // here is that finding the name started with `value`
 onFilter: (value, record) => record.name.indexOf(value) === 0,
 // sorter: (a, b) => a.name.length - b.name.length,
 sorter: true,
}]

那回调不写,我应该在哪里发送后端排序请求呢?

<CustomTable // 封装的表格组件,属性是一样的
 
   rowKey='projId' 
   size="small" 
   style={{ height: tableHeight }} 
   columns={columns} 
   tableData={this.state.tableData} 
   expandedRowRender={this.expandedRowRender} 
   pagination={pagination} 
   handleTableChange={this.handleTableChange} // 在这里发送请求 处理后端排序 
   scroll={{ y: tableScrollHeight, x: 1660 }} 
   tableRowSelection={this.tableRowSelection} 
/>

以上这篇antd table按表格里的日期去排序操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
页面使用密码保护代码
Apr 10 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
jQuery插件制作的实例教程
May 16 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 #Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 #Javascript
详解Vue数据驱动原理
Nov 17 #Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 #Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 #jQuery
html中创建并调用vue组件的几种方法汇总
Nov 17 #Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 #Javascript
You might like
用PHP读注册表
2006/10/09 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
Node.js静态文件服务器改进版
2016/01/10 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
vuex入门最详细整理
2020/03/04 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
python基于pyDes库实现des加密的方法
2017/04/29 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
深入浅析Python中的迭代器
2019/06/04 Python
Flask配置Cors跨域的实现
2019/07/12 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
团队精神演讲稿
2013/12/31 职场文书
学习自我鉴定
2014/02/01 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
人事任命书范本
2015/09/21 职场文书
体育部部长竞选稿
2015/11/21 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android
配置nginx负载均衡
2022/05/06 Servers
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers
TS 类型收窄教程示例详解
2022/09/23 Javascript