Jquery - 加载后排序表数据

Question

我想订购表格中显示的数据。所以条目“位于”正确部分的下方。

我正在通过 LDAP 从数据库 AD 中检索数据。然后将其以表格的形式呈现在屏幕上......

<tr id="MAIN:1" class="group_heading nodrag"><td colspan="4">MAIN1</td></tr>

<tr id="1" class="toggler_row" data-group="S:1" style="cursor: move;">
    <td><input name="local[]" type="text" value="54-A944"></td>
    <td><input name="description[]" type="text" value="MidWest"></td>
</tr>

<tr id="8" class="toggler_row" data-group="S:2" style="cursor: move;">
    <td><input name="local[]" type="text" value="16-B120"></td>
    <td><input name="description[]" type="text" value="SouthEast"></td>
</tr>

<tr id="2" class="toggler_row" data-group="" style="cursor: move;">
    <td><input name="local[]" type="text" value="12-B879"></td>
    <td><input name="description[]" type="text" value="South"></td>
</tr>


<tr id="MAIN:2" class="group_heading nodrag"><td colspan="4">MAIN2</td></tr>

<tr id="6" class="toggler_row" data-group="S:2" style="cursor: move;">
    <td><input name="local[]" type="text" value="79-C878"></td>
    <td><input name="description[]" type="text" value="LOCAL"></td>
</tr>

<tr id="5" class="toggler_row" data-group="S:1" style="cursor: move;">
    <td><input name="local[]" type="text" value="82-A942"></td>
    <td><input name="description[]" type="text" value="SouthWest"></td>
</tr>

header 部分的条目与此类似：

<tr id="MAIN:1" class="group_heading nodrag"><td colspan="4">MAIN1</td></tr>

他们的 ID 以 MAIN 开头，后跟部分编号，例如 1

应位于此部分下方的条目具有 S:1 的数据组，因此任何 S:1 都应位于 MAIN:1 下方

MAIN:2 下的任何 S:2 等等.. 任何没有数据组的条目都应位于 ID 为 NONE 的部分下

如何循环遍历表格条目并将它们移动到正确的位置？

可能有很多 MAIN 部分，也可能有很多子条目。

有什么想法吗？

更新 我有这个工作使用：

$("tr.toggler_row").each(function() {
    var id = $(this).prop('id');
    var group = $(this).data('group');
    var arr = group.split(':');
    if (arr[1]) {
        $('#' + id).insertAfter('#MAIN\\:' + arr[1]);
    } else {
        $('#' + id).insertAfter('#NONE');
    }
});

一旦页面加载并且似乎可以正常工作，就会调用它。 还有比这更好的方法吗？

谢谢

Answer 1

根据我的理解，我认为这就是您要寻找的。点击排序按钮对表格行进行排序。

$(document).ready(function() {
  function getAttributesString(element) {
     var AttrString = "";
     $.each(element.attributes, function() {
         if(this.specified) {
          AttrString += " " + this.name + "='" + this.value + "' ";
         }
     });
     return AttrString;
  }
  
  function getRowHTML(element){
      var html = "";
  		html += '<tr ' + getAttributesString(element) + ' >';
      html += $(element).html();
      html += "</tr>";
      return html;
  }
  
  $("#Sort").click(function(){
      var sortedHtml = "";
      sortedHtml += "<table>";
      $("table tr[id^='MAIN:']").each(function(){     
      		sortedHtml += getRowHTML(this);
          var headerId =  this.id.split(':')[1];
          if (headerId != "") {
            $("table tr[data-group='S:" + headerId + "']").each(function(){
                 sortedHtml += getRowHTML(this);
            });
          }
          else {
            $("table tr[data-group='']").each(function(){
                sortedHtml += getRowHTML(this);
            });
          }
      });
      sortedHtml += "</table>";
      $("#container").html("");
      $("#container").html(sortedHtml);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<table>
<tr id="MAIN:1" class="group_heading nodrag"><td colspan="4">MAIN1</td></tr>

<tr id="1" class="toggler_row" data-group="S:1" style="cursor: move;">
    <td><input name="local[]" type="text" value="54-A944"></td>
    <td><input name="description[]" type="text" value="MidWest"></td>
</tr>

<tr id="8" class="toggler_row" data-group="S:2" style="cursor: move;">
    <td><input name="local[]" type="text" value="16-B120"></td>
    <td><input name="description[]" type="text" value="SouthEast"></td>
</tr>

<tr id="2" class="toggler_row" data-group="" style="cursor: move;">
    <td><input name="local[]" type="text" value="12-B879"></td>
    <td><input name="description[]" type="text" value="South"></td>
</tr>


<tr id="MAIN:2" class="group_heading nodrag"><td colspan="4">MAIN2</td></tr>

<tr id="6" class="toggler_row" data-group="S:2" style="cursor: move;">
    <td><input name="local[]" type="text" value="79-C878"></td>
    <td><input name="description[]" type="text" value="LOCAL"></td>
</tr>

<tr id="5" class="toggler_row" data-group="S:1" style="cursor: move;">
    <td><input name="local[]" type="text" value="82-A942"></td>
    <td><input name="description[]" type="text" value="SouthWest"></td>
</tr>

<tr id="MAIN:" class="group_heading nodrag"><td colspan="4">Others</td></tr>
</table>
</div>
<br>
<button type="button" id="Sort"> Sort </button>

Fiddle