antd table按表格里的日期去排序操作

2024-10-17 17:22:34

表格内容

根据票据日期升序（这里是已经排序后的效果）

上代码

代码中data的内容如下

根据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按表格里的日期去排序操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

antd 表格列宽自适应方法以及错误处理操作

当不给某列设置宽度时这一列的宽度等于: (表格宽度-有宽度列的宽度)/没有固定宽度的列的数量也就是没有设置宽度的列会平分表格中余下的宽度在antd 的表格中, 当你不设置表格滚动, 并且你给每一列设置了固定宽度, 那么他们会按照设置宽度的比例瓜分表格的宽度表格横向滚动, 序号, 权属人左定位 antd 中的表格列固定是隐藏原列, 然后又在上面覆盖新列实现的, 也就是说白色部分实际是原列, 只不过是被隐藏了这个表格中只有序号有固定宽度, 那么余下所有列平分表格剩余宽度, 被定为的权属人的新
Antd的table组件表格的序号自增操作

1,效果图 2,实现方法 const columns = [ { title: '序号', render:(text,record,index)=>`${index+1}`, }, { title:'操作', dataIndex:'delete', key:'delete', render: (text,record) => ( <span> <Link to={{ pathname : '/info/Edit' , query : { id : record.id }}}&
Antd的Table组件嵌套Table以及选择框联动操作

一.需求在使用Table组件嵌套Table时,父子Table的选择框需要联动,即父Table选中,该行下的子Table需要全选中,某一个子Table全部选中,则该子Table所在的父Table那一行也需要选中. 二.Table的rowSelection配置父子Table联动,就不能使用OnChange,需要使用OnSelect以及OnSelectAll手动配置. selectedRowKeys:指定选中项的key数组 OnSelect:手动选择/取消选择某行的回调 OnSelect(reco
design vue 表格开启列排序的操作

开启排序 1.本地数据排序 column数据设置,需要开启的列设置sorter: (a, b) => a.address.length - b.address.length, 自定义排序方法 2.服务端排序sorter设置true 点击排序,表格触发change方法,接受参数 change (pagination, filters, sorter, { currentDataSource }) 第三个参数就是排序信息 {field, order} <a-table :columns="
antd table按表格里的日期去排序操作

表格内容根据票据日期升序(这里是已经排序后的效果) 上代码代码中data的内容如下根据paper_date排序,因为目前这种格式不支持比较,需要先转换成时间戳 new Date(aTimeString).getTime() 之后再用装换后的时间戳去比较,比较用到的函数是 .sort,一下是用来比较的代码 data.sort(function(a, b) { let aTimeString = a.paper_date; let bTimeString = b.paper_date; let
antd table长表格出现滚动条的操作方法

如图想实现如上图所示,看antd table官方文档想实现这个,介绍的很不详细,实现起来一堆坑.阿里云页面的这种表格,拉伸起来也有很多bug,也不知道他的实现方法如何,我这边介绍一种方法实现如下,遇到拉伸也不怕… <div class="content"> <a-table :columns="columns" :data-source="dataSource" :row-key="record => recor
javascript实现对表格元素进行排序操作

我们在上网中都能看到很多能够排序的,如大小.时间.价格等现在我们也试一下排序功能: 排序的函数代码:里面含有点击之后排序--还原,和排升序和降序. function sortAge(){ //对年龄进行排序,要先进行获得每一行对象,然后对象对象中的第一个(从0 开始)的大小进行排序 var tabNode = document.getElementById("tabid"); var rows0 = tabNode.rows; var rows1 = []; //现将元素拷贝一份出来
layui table 表格上添加日期控件的两种方法

方法一: var tableInit = table.render({ elem: '#tbtxrz' , method: 'post' , data: jsonData , height: "auto" , id: "tbtxrz" , text: {none: '暂无相关数据'} , toolbar: toolbartxrz , cols: [[ { //设置表格中部分字体的颜色 field: "number", title: "序
JS实现两表格里数据来回转移的方法

本文实例讲述了JS实现两表格里数据来回转移的方法.分享给大家供大家参考.具体分析如下: 最近做项目里用到了一个两个表格里数据的来回转移,用JS稍微做了下,界面也没有去弄很漂亮感觉写得有点繁琐了,有时间再改进哈 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml
vue iview 隐藏Table组件里的某一列操作

1.假设我要隐藏columns里的 "账户组名称" columns: [ { type: 'selection', width: 60, align: 'center' }, { title: '账号ID', key: 'accountIdString' }, { title: '账号名称', key: 'accountName' }, { title: '账户组名称', key: 'accountGroupName' }] 2.根据各自需求去判断示例:如果是单账户表标题显示&quo
php+mysqli实现将数据库中一张表信息打印到表格里的方法

本文实例讲述了php+mysqli实现将数据库中一张表信息(包括表头)打印到表格里的方法.分享给大家供大家参考.具体如下: 这段代码将就看吧.需要学习基础知识.代码如下: 复制代码代码如下: <?php $mysqli = new MySQLi("localhost","root","123456","liuyan"); if(!$mysqli){ die($mysqli->error); } function
把excel表格里的数据导入sql数据库的两种方法

本来最近在研究微信公众平台的,老大临时交我个任务,把excel表格里的数据导入sql数据库,我想这so easy嘛. 没想都在上面消磨了两天... 把情况介绍下:在数据库中有如下这样结构的表(A表) 我只取关键的及列里面还有很多数据. 有一张id和name对照的excel文件(B表)和N张结构类似的excel表(C表)(没有id那一列) 我的任务在B表中找到C表中数据对应的id后,然后将id加到C表中,最后根据id是唯一的,用C表的数据去更新A表的数据.这里主要涉及了e
如何让一个json文件显示在表格里【实现代码】

<body> //首先得把架子搭起来 <table id = "tb" border="1"> <tr></tr> <tr></tr> </table> //js部分 <script> //简单的json内容 var json = {"姓名":"张三","年龄":"26","性别&q

antd table按表格里的日期去排序操作

相关推荐

随机推荐