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插件Tabs实现过程
Jul 06 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 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+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
php获取远程文件大小
2015/10/20 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
Vue.js中的computed工作原理
2018/03/22 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
Python中函数参数调用方式分析
2018/08/09 Python
简单了解python反射机制的一些知识
2019/07/13 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
什么是Python中的顺序表
2020/06/02 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
网络工程师的自我评价
2013/10/02 职场文书
顶岗实习接收函
2014/01/09 职场文书
学生思想表现的评语
2014/01/30 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
租房协议书
2014/04/10 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
初中团委工作总结
2015/08/13 职场文书
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL