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利用初始化数据装配模版的实现代码
Nov 17 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
javascript基本算法汇总
Mar 09 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 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生成EAN_13标准条形码实例
2013/11/13 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
js闭包的用途详解
2014/11/09 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
详解Python中的条件判断语句
2015/05/14 Python
Linux下python制作名片示例
2018/07/20 Python
对python3新增的byte类型详解
2018/12/04 Python
Python语言快速上手学习方法
2018/12/14 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
一名毕业生的自我鉴定
2013/12/04 职场文书
节约粮食标语
2014/06/18 职场文书
工会工作先进事迹
2014/08/18 职场文书
听证会主持词
2015/07/03 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python