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 相关文章推荐
JS Date函数整理方便使用
Oct 23 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
基于vue2.0实现简单轮播图
Nov 27 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
VUE中使用MUI方法
Feb 12 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python循环监控远程端口的方法
2015/03/14 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
Python线程之定位与销毁的实现
2019/02/17 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
校班主任推荐信范文
2013/12/03 职场文书
表扬信格式
2014/01/12 职场文书
学习十八大的心得体会
2014/09/01 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
python绘制箱型图
2021/04/27 Python
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python