Question

我正在尝试设置一种非常简单的内容排序方式。我找到了TinySort，它似乎能够完成这项工作，但我需要排序来移动整个容器div，而不仅仅是重新排列内容。

基本上，我已经设置了激活排序功能的链接，他们正在对我所寻找的跨度进行排序，但是它会在包含它们的div中移动范围。

我构建了一个简单的JSFIDDLE来展示我的斗争。 https://jsfiddle.net/og6jfLjf/

当您按价格排序时，价格会按顺序移动并按顺序排列，但是他们并没有随身携带容器。他们只是在每个容器内移动。

$(document).ready(function() {
    $(".price-sort").click(function () {  
      tinysort("span.price");
    });
    $(".title-sort").click(function () {  
      tinysort("span.title");
    });
});

div{
    width: 100px;
    height:100px;
    background-color: #000;
    color: #fff;
    margin:10px;
}
#div1{
    background-color:#666;
}
#div4{
    background-color:#aaa;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.2/tinysort.js"></script>
<div id="div4"><span class="title">Title 1</span> - $<span class="price">5</span></div>
<div id="div1"><span class="title">Title 3</span> - $<span class="price">4</span></div>
<div id="div2"><span class="title">Title 2</span> - $<span class="price">6</span></div>

<a href="#" class="price-sort">Sort By Price</a> |
<a href="#" class="title-sort">Sort By Title</a> |

Answer 1

解决了这个问题。我没有告诉函数包含div。所以我调整了脚本以根据其中的跨度对div进行排序。这是一个可以显示它的JSFIDDLE。

https://jsfiddle.net/oym96zL5/

$(document).ready(function() {
$(".price-sort").click(function () {  
  tinysort('div','span.price');
});
$(".title-sort").click(function () {  
  tinysort('div','span.title');
});

}）;

Answer 2

你可以制作一张桌子，如果你有很多数据，这会更容易。单击“项目”标题和“价格”标题以对行进行排序。

$(document).ready(function() {
  var table = document.getElementById('xtable'),
    tableHead = table.querySelector('thead'),
    tableHeaders = tableHead.querySelectorAll('th'),
    tableBody = table.querySelector('tbody');

  tableHead.addEventListener('click', function(e) {
    var tableHeader = e.target,
      textContent = tableHeader.textContent,
      tableHeaderIndex, isAscending, order;

    if (textContent !== 'add row') {
      while (tableHeader.nodeName !== 'TH') {
        tableHeader = tableHeader.parentNode;
      }
      tableHeaderIndex = Array.prototype.indexOf.call(tableHeaders, tableHeader);
      isAscending = tableHeader.getAttribute('data-order') === 'asc';
      order = isAscending ? 'desc' : 'asc';
      tableHeader.setAttribute('data-order', order);
      tinysort(tableBody.querySelectorAll('tr'), {
        selector: 'td:nth-child(' + (tableHeaderIndex + 1) + ')',
        order: order
      });
    }
  });
});

table.blue {
  padding: 0;
  box-shadow: 0 1px 9px 1px #ccc;
  border-radius: 6px;
  margin: 20px auto;
}
.blue th {
  color: #FFF;
  background: #2C7EDB;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}
.blue tr:nth-child(odd) {
  background-color: #333;
  color: #FFF;
}
.blue tr:nth-child(even) {
  background-color: #D3E9FF;
  color: #333;
}
.blue td {
  border-style: solid;
  border-width: 1px;
  border-color: #264D73;
  padding: 5px;
  text-align: left;
  vertical-align: top;
}
.blue thead th:first-child {
  border-top-left-radius: 6px;
}
.blue thead th:last-child {
  border-top-right-radius: 6px;
}
.blue tbody tr:last-child th:first-child {
  border-bottom-left-radius: 6px;
}
.blue tbody tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}
.blue tbody tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.2/tinysort.js"></script>
<table class="blue" id="xtable">
  <thead>
    <tr>
      <th data-order="asc">
        <a>Item
          </a>
            </th>
            <th>Qty
              </th>
                <th data-order="asc"><a>Price</a> </th>
            <th>Desc</th>
    </tr>
    </thead>
    <tbody>
    <tr> <td> Porche </td><td>1</td> <td> $100, 000.00 </td><td>Sports car</td> </tr>
      <tr><td>Toilet Paper</td> <td> 5 </td><td>$50.00</td> <td> 8 rolls </td></tr>
    <tr> <td> Laptop </td><td>1</td> <td> $600.00 </td><td>HP i7 12GB 1TB</td> </tr>
    </tbody>
    </table>

Jquery / TinySort移动整个DIV容器

2 个答案: