antd table 时间搜索_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 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,
}]
那回調不寫,我應該在哪里發(fā)送后端排序請求呢?
rowKey='projId'
size="small"
style={{ height: tableHeight }}
columns={columns}
tableData={this.state.tableData}
expandedRowRender={this.expandedRowRender}
pagination={pagination}
handleTableChange={this.handleTableChange} // 在這里發(fā)送請求 處理后端排序
scroll={{ y: tableScrollHeight, x: 1660 }}
tableRowSelection={this.tableRowSelection}
/>
以上這篇antd table按表格里的日期去排序操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持自學編程網。
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯,堅持創(chuàng)作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的antd table 时间搜索_antd table按表格里的日期去排序操作的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 转:XML 中的空白字符须知:xml:s
- 下一篇: EDID:识别和解决常见问题指南