前端对数据的某个节点进行排序、序号 时间进行排序

前端对数据的某个节点进行排序、序号 时间进行排序

一、代码部分
1.html

<div id="dataCont">
  <table id="tabData" cellspacing="0" rules="rows">
    <tr class="tabTitle">
      <td TDN='ID' class="sortHeader" data-sort="id">序号 <span class="sortIcon"></span></td>
      <td tdN="O">名称</td><td tdN="G">名称</td>
      <td tdN="AN">操作</td>
      <td TDN='GT' class="sortHeader" data-sort="time">时间 <span class="sortIcon"></span></td>
      <td tdN="STi">结果</td><td tdN="ST">操作</td>
    </tr>
    <tr class="tabAlarm">
      <td tdN="ID">1</td>
      <td tdN="O" >名称A<div class="divIn"></div> </td>
      <td tdN="G">名称A</td>
      <td tdN="AN">名称A</td>
      <td tdN="GT">2023-06-03 12:30:00</td>
      <td tdN="STi">名称A</td>
      <td tdN="ST">操作名称A</td>
    </tr>
    <tr class="tabAlarm">
      <td tdN="ID">2</td>
      <td tdN="O" >名称B<div class="divIn"></div> </td>
      <td tdN="G">名称B</td>
      <td tdN="AN">操作B</td>
      <td tdN="GT">2023-06-03 10:30:00</td>
      <td tdN="STi">执行结果B</td>
      <td tdN="ST">操作B</td>
    </tr>
    <!-- 其他行省略 -->
  </table>
  <div style="height: 2em"></div>
</div>

2.css部分:

.sortIcon {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border: 4px solid transparent;
  border-top: 6px solid #8e8e8e;
  cursor: pointer;
  transition: transform 0.3s ease-out;
}

.sortIcon.up {
  border-top: none;
  border-bottom: 6px solid #8e8e8e;
  transform: rotate(180deg);
}

.sortIcon.down {
  transform: rotate(0);
}

.sortHeader {
  cursor: pointer;
}

3.js部分：

// 初始排序方式：按照序号倒序排列
var sortOrder = {type: 'id', order: 'desc'};

// 点击排序标志时触发事件
$('.sortHeader').on('click', function(){
  var type = $(this).data('sort');
  // 判断当前排序方式，决定要使用的排序函数和排序顺序
  var sortFunc = (type === sortOrder.type && sortOrder.order === 'asc') ? descending : ascending;
  sortOrder = {type: type, order: (sortOrder.order === 'asc' ? 'desc' : 'asc')};
  
  // 找到需要排序的数据行并排序
  var $rows = $('#tabData tr').not('.tabTitle');
  $rows.sort(function(a, b){
    var val1 = getValue(a, type);
    var val2 = getValue(b, type);
    return sortFunc(val1, val2);
  });

  // 根据当前排序的顺序决定排序标志的显示方式
  $('.sortIcon').removeClass('up down');
  $(this).find('.sortIcon').addClass(sortOrder.order === 'asc' ? 'down' : 'up');

  // 插入排好序的数据行到表格中
  $rows.detach().appendTo('#tabData');
});

// 根据数据行和指定属性，获取对应的值
function getValue(row, type){
  var val = $(row).find('[tdN="' + type + '"]').text();
  return type === 'id' ? parseInt(val) : parseDate(val);
}

// 将日期字符串转换为日期对象，便于进行排序
function parseDate(str){
  var parts = str.split(/[- :]/);
  return new Date(parts[0], parts[1] - 1, parts[2], parts[3], parts[4], parts[5]);
}

// 升序排序函数
function ascending(a, b) {
  return a > b ? 1 : -1;
}

// 降序排序函数
function descending(a, b) {
  return a < b ? 1 : -1;
}

注：
CSS 样式中 sortIcon 类规定了排序标志的样式，包括箭头图案和鼠标光标，使用了 border 属性和旋转效果来实现上、下箭头的切换。在 JavaScript 代码中，根据当前的排序方式设置排序标志的样式，在排序时找到需要排序的数据行并排序，最后将排好序的数据行插入到表格中。