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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
node.js中watch机制详解
Nov 17 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
js select实现省市区联动选择
Apr 17 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
Postman内建变量常用方法实例解析
Jul 28 Javascript
openlayers实现地图测距测面
Sep 25 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
PHP中一个控制字符串输出的函数
2006/10/09 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
用cssText批量修改样式
2009/08/29 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
2014年小学校长工作总结
2014/12/08 职场文书
公务员个人考察材料
2014/12/23 职场文书
本溪关门山导游词
2015/02/09 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
家长会感言
2015/08/01 职场文书
《西门豹》教学反思
2016/02/23 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL