fiduswriter/Simple-DataTables日期列排序异常问题解决
问题根因
fiduswriter/Simple-DataTables 默认取单元格渲染后的可见文本作为排序依据。当前你的render函数直接返回mm/dd/yyyy格式字符串,组件会按普通字符串逐字符比对排序,第一个分段是月份,自然出现“按月份排序”的异常结果。
你测试yyyy/mm/dd格式能正常排序,只是因为该字符串的逐位比对顺序和日期大小顺序刚好重合,并非组件正确识别了日期类型。
异常排序效果参考:
修复方案
利用组件render函数支持「排序值/显示值分离」的特性:排序逻辑使用原始日期的时间戳做数字比对,页面展示保留要求的mm/dd/yyyy格式,无需修改后端接口、无需调整业务展示规则。
将日期列配置替换为如下代码即可:
{ select: 4, type: 'date', sort: 'desc', format: 'ISO_8601', render: function(data, cell, row) { if (!data) { return { _: 0, display: '' } } const dateObj = new Date(data); // 生成业务要求的mm/dd/yyyy展示格式 const year = dateObj.getFullYear(); const month = String(dateObj.getMonth() + 1).padStart(2, '0'); const day = String(dateObj.getDate()).padStart(2, '0'); const displayContent = `${month}/${day}/${year}`; // 返回分离结构:_为内部排序/搜索用值,display为页面可见内容 return { _: dateObj.getTime(), display: displayContent } } }
配置说明
- 返回结构中的
_字段仅在组件内部排序、搜索时使用,不会渲染到页面,这里存储日期对应的毫秒时间戳,数字大小和日期新旧完全对应,降序排序时自动将最新日期排在最前,不会再出现格式导致的排序错乱 display字段为用户在页面看到的单元格内容,完全保留mm/dd/yyyy的业务要求格式- 原有
type: 'date'、format: 'ISO_8601'配置可保留,不会冲突,组件会优先使用_字段的值完成排序逻辑
内容的提问来源于stack exchange,提问作者David
相关产品推荐
相关产品推荐

