使用jQuery对不在HTML表中的元素进行排序

debugcn 发表于 Dev

肖恩

我有一组DIV，它们像表格一样显示，但不在HTML表格中。结构是这样的：

   <div id="queryResult" style="display: block;">
   <div class="rRow">
      <div class="rCell4">Job</div>
      <div class="rCell4">Company</div>
      <div class="rCell4">Customer</div>
      <div class="rCell4">Product</div>
      <div class="rCell4">Balance</div>
   </div>
   <div class="rRow">
      <div class="rCell4 editMe">46549</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">Dry Transload</div>
      <div class="rCell4">XYZ co</div>
      <div class="rCell4">39.100</div>
      <div class="rCell4">26.48550</div>
   </div>
   <div class="rRow">
      <div class="rCell4 editMe">46549</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">Dry Transload</div>
      <div class="rCell4">MNOP co</div>
      <div class="rCell4">39.100</div>
      <div class="rCell4">26.48550</div>
   </div>   
   <div class="clr"></div>
</div>

显示时，它看起来像这样：

所以我想要的是能够通过单击列标题或其他方式对列进行排序。我知道有像排序表这样的jQuery / JavaScript库，但是我发现的所有库都期望有HTML表。

我会咬紧牙关，只是将其切换到桌子上，还是有另一种合理（更简便）的解决方案？

阿拉什（Arash Danesh）

这是一个解决方案。我在您的html中添加了一些类以进行更多控制。

HTML：

<div id="queryResult" style="display: block;">
   <div class="rRow header">
      <div class="rCell4">Job</div>
      <div class="rCell4">Company</div>
      <div class="rCell4">Customer</div>
      <div class="rCell4">Product</div>
      <div class="rCell4">Balance</div>
   </div>
   <div class="rRow body">
      <div class="rCell4 editMe">46549</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">VDry Transload</div>
      <div class="rCell4">XYZ co</div>
      <div class="rCell4">38.100</div>
      <div class="rCell4">18.48550</div>
   </div>
   <div class="rRow body">
      <div class="rCell4 editMe">46623</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">Dry Transload</div>
      <div class="rCell4">MNOP co</div>
      <div class="rCell4">31.100</div>
      <div class="rCell4">29.48550</div>
   </div>
  <div class="rRow body">
      <div class="rCell4 editMe">46145</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">ADry Transload</div>
      <div class="rCell4">JKH co</div>
      <div class="rCell4">42.100</div>
      <div class="rCell4">16.48550</div>
   </div>
   <div class="clr"></div>
</div>

这是一个进行排序的jQuery：

jQuery的：

$('.header').children('.rCell4').each(function(index){
  $(this).click(function(){
    var container = $('#queryResult');
    var header = $('.header');
    var cmpCols = [];
    $('.body').each(function(){
      cmpCols.push($(this).children('.rCell4').eq(index));
    });
    for(i=0; i<cmpCols.length-1; i++){
      for(j=i; j<cmpCols.length; j++){
        if(cmpCols[i].text() > cmpCols[j].text()){
          var tmp = cmpCols[i];
          cmpCols[i] = cmpCols[j];
          cmpCols[j] = tmp;
        }
      }
    }
    container.html(header);
    for(i=0; i<cmpCols.length; i++){
      container.append(cmpCols[i].parent());
    }
  });
});

工作jsFiddle示例。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。