如何使 div 可排序？

Question

我有一个像页面一样的 div 表，是否可以使用 javascript 使其像 html 表一样可排序？

由于How to add td rowspans to a table?，我无法继续使用它，因此我从普通表移出，因此使用了 div 表。

所以我使用了这个 div 表，我唯一缺少的是如何使其可排序，以便我可以按项目或价格对其进行排序.. 像数据表、tablesorter 等

<div class="Header">    
    <div class="item"><a href="#">Item</a>
    </div>
    <div class="desc"><a href="#">Description</a>
    </div>      
    <div class="price"><a href="#">Price</a>
    </div>    
    <div class="status"><a href="#">Status</a>
    </div>
</div>

<div class="Info">
  <div class="itemName">
    <div class="item">Item 1</div>
  </div>
  <div class="itemInfo">
    <div class="List">
      <div class="Desc">Description 1</div>
      <div class="Box">                
        <div class="price">$79</div>
        <div class="status">16 in stock</div>
      </div>
    </div> 
  </div>
</div>

完整代码在这里http://codepen.io/anon/pen/empqyN?editors=110和这里http://jsfiddle.net/a4fcxzra/

Answer 1

您可以使用 JavaScript 对数组进行排序，然后动态创建标签以将它们放置在列标题中（您应该在 html 中创建以提高性能）

Answer 2

这是一个排序处理程序：（标题类需要与信息所在的位置相同，因此在标题中将 desc 更改为 Desc）

var sorting=1;
$(".Header div").each(function(){
    $(this).click(function(){
        var cl=$(this).attr("class") // get header class, this is where I get info from
        sorting = sorting == 1 ? -1 : 1 ;         // sorting asc or desc
        $(".Info").detach().sort(function(a,b){
            var str1=$(a).find('.'+cl).text(); // get text
            var str2=$(b).find('.'+cl).text();
            var n1 = str1.match(/\d+/)[0] //get digits in text
            var n2 = str2.match(/\d+/)[0]
            if(n1 != '' ){ // if its a number
                return n1*sorting > n2*sorting; // sort by number
            }else{ // sort by string
                return sorting == 1 ? str1 > str2 : str1 < str2
            }
        }).appendTo($(".Header").parent());
    })
})

工作小提琴：http://jsfiddle.net/juvian/a4fcxzra/1/