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 相关文章推荐
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
基于jquery实现图片放大功能
May 07 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
php依赖注入知识点详解
2019/09/23 PHP
asp批量修改记录的代码
2008/06/25 Javascript
JavaScript 继承的实现
2009/07/09 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
Underscore源码分析
2015/12/30 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
英国儿童图书网站:Scholastic
2017/03/26 全球购物
办护照工作证明范本
2014/01/14 职场文书
用Python实现Newton插值法
2021/04/17 Python
PyQt5实现多张图片显示并滚动
2021/06/11 Python
python多次执行绘制条形图
2022/04/20 Python