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下面的任何S：2：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

Jquery - 加载后对表数据进行排序

1 个答案: