1. 程式人生 > 程式設計 >antd table按表格裡的日期去排序操作

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

表格內容

根據票據日期升序(這裡是已經排序後的效果)

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按表格裡的日期去排序操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。