一. 背景
· 因种种原因(需求变更时已开发结束数据存储结构改变成本太高、各item项dom结构并不完全一致、选型为古老的webfrom,并且是单项赋值,改为循环改动大),导致只能选用js在前端进行dom排序。
·当然,能在服务端排序尽量在服务端排序,前端尽量只负责展示。
·本文不考虑适用范围,仅是针对于使用jQuery sort进行排序的例子。
二. 需求
每个项的值为时间字符串,要根据时间先后顺序,在前端排序。
未排序时页面如下图:
这部分的dom结构如下图(class="sort"是自己加的标识,方便取到所有需要排序字段):
三. 实现代码
//根据时间先后顺序排序
function Sort() {
//报错不阻断执行
try {
//先取这部分的html代码
var $domArr = $("#colArr .sort").get();
//Arr部分排序
$domArr.sort(function (a, b) {
//从每个item内取出时间(class='datespan'为时间容器标识)
var $aHtml = $(a).find('.datespan').eq(0).html();//因为燃油是开始时间和结束时间2个时间,所以只取eq0
var $bHtml = $(b).find('.datespan').eq(0).html();
if ($aHtml && $bHtml) {
var $aArr = $aHtml.split('<b>');
var $bArr = $bHtml.split('<b>');
//取出的html字符串为:
//2019-03-27 23:54 <b> LT/</b> 2019-03-27 15:54 <b>Z</b>
if ($aArr.length > 0 && $bArr.length > 0) {
var aValue = $aArr[0]; //A的北京时间
var bValue = $bArr[0]; //B的北京时间
var aDate = new Date(aValue);
var bDate = new Date(bValue);
if (aDate > bDate)
return 1 //倒序排则-1
else
return -1
}
}
});
console.log($domArr);
$("#colArr").html($domArr);
} catch (e) {
}
}
四. 实现效果
排序后如图
仅做记录,以供参考。