javascript - 如何使 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

这是一个排序处理程序:( header 类需要与信息所在的位置相同，因此将 header 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());
    })
})

工作 fiddle :http://jsfiddle.net/juvian/a4fcxzra/1/