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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
vue.js多页面开发环境搭建过程
Apr 24 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实现利用phpexcel导出数据
2013/08/24 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
vue.js学习之UI组件开发教程
2017/07/03 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
Python reques接口测试框架实现代码
2020/07/28 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
Java如何格式化日期
2012/08/07 面试题
电气技术员岗位职责
2013/11/19 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
法学院方阵解说词
2014/01/29 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
大学生安全教育心得体会
2016/01/15 职场文书