javascript - 对每个实体具有多个相关行的表进行排序

Question

我应该如何解决以下问题>我在表中多个相关行中拥有有关每个实体的数据(我知道使用表已经过时，我应该使用div，但我很好表。如果需要div，我会更改。)我使用 jQuery 根据单元格的 ID 每 x 秒将新数据放入单元格中。 我需要一个 javascript 函数或者可以让我尊重多个相关行对表进行重新排序的函数。我对任何其他方法持开放态度。

(添加 PHP 部分只是为了理解。)

<table>
    <?php
    foreach($members as $member)
       {
          //data for this member starts here

         echo"<tr>
                <td>John</td>
                <td>score:1000</td>
                <td>MAX score:2000</td>
             </tr>
             <tr>
                <td>somevalue:3000</td>
                <td>another value:4000</td>
                <td>another value:4000</td>
             </tr>
             <tr>
                  <td collspan=‘3'>This is a row for separate the members</td>
             </tr>
             ";
       //data for this member ends here
       }
?>
</table>

例如我想根据分数进行排序。排序应该将包含“somevalue”的行和分隔行以及新的“位置”一起带到新的“位置”。

Answer 1

我将在这里冒险给你一个选择。将数据放入一组 div 和 span 中的单行中，以模拟表格行和单元格的标记。请注意，您必须对它们进行样式设置才能更好地模拟它们。 (也许是 bootstrap row 等，但我会把它留给你)，这里的关键是排序。

这里为了简化逻辑，我在每行的数据属性中放置了一个数值，然后按该数值对行进行排序。

注意:假设由单个tbody组成，有单个排序值、数字数据值等。

如果您愿意，您可以放置​​多个带有数据属性的“tbody”并对它们进行排序 - 我将把这个练习留给您，但是流程在处理大量数据时会变慢。

注意:每当渲染或添加时都会调用排序。您还可以避免后续排序，只需在前一行之后插入行即可。

插入示例(可能更好，但足以开始)

  var $newRow = $('<tr data-sortdata="5"><td>putalldivs in here<td></tr>');
  var rowToInsertBefore = $('#mytable').find('tr').filter(function() {
    return $(this).data('sortdata') >= $newRow.data('sortdata');
  }).get(0);

  if (typeof rowToInsertBefore === 'undefined') {
    $('#mytable').find('tbody').append($newRow);
  } else {
    $newRow.insertBefore(rowToInsertBefore);
  }

要排序的大部分代码:

function sortTable(table, order, item) {
  var asc = order === 'asc',
    tbody = table.find('tbody'),
    sd = item ? item : "sortdata";
  tbody.find('tr').sort(function(a, b) {
    var sA = 1 * $(a).data(sd);
    var sB = 1 * $(b).data(sd);
    if (asc) {
      return (sA < sB) ? -1 : (1 * sA > sB) ? 1 : 0;
    } else {
      return (sB < sA) ? -1 : (sB > sA) ? 1 : 0;
    }
  }).appendTo(tbody);
}
sortTable($('#mytable'), 'asc', 'sortdata');

table {
  border-collapse: collapse;
}

tr {
  border: solid 1px lime;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
    <tr data-sortdata="3000">
      <td>
        <div>
          <span>John</span>
          <span>score:1000</span>
          <span>MAX score:2000</span>
        </div>
        <div>
          <span>somevalue:3000</span>
          <span>another value:4000</span>
          <span>another value:4000</span>
        </div>
        <div>
          <span>This is a row for separate the members</span>
        </div>
      </td>
    </tr>
    <tr data-sortdata="5000">
      <td>
        <div>
          <span>Brenda</span>
          <span>score:3000</span>
          <span>MAX score:2000</span>
        </div>
        <div>
          <span>somevalue:5000</span>
          <span>another value:4000</span>
          <span>another value:4000</span>
        </div>
        <div>
          <span>This is a row for separate the members</span>
        </div>
      </td>
    </tr>
    <tr data-sortdata="1000">
      <td>
        <div>
          <span>Harry</span>
          <span>score:1000</span>
          <span>MAX score:500</span>
        </div>
        <div>
          <span>somevalue:1000</span>
          <span>another value:4000</span>
          <span>another value:4000</span>
        </div>
        <div>
          <span>This is a row for separate the members</span>
        </div>
      </td>
    </tr>
    <tr data-sortdata="1000">
      <td>
        <div>
          <span>Brenda1</span>
          <span>score:3000</span>
          <span>MAX score:2000</span>
        </div>
        <div>
          <span>somevalue:1000</span>
          <span>another value:4000</span>
          <span>another value:4000</span>
        </div>
        <div>
          <span>This is a row for separate the members</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>