list.js

Question

List.js 没有 jQuery。它开箱即用。

使命：

当点击 'List By Price' 按钮时，已售罄的商品需要显示在排序列表的底部 - 无论升序还是降序.

我已经开始开发客户排序()。

    list.sort('price', {
      order: 'asc',
      sortFunction: function (a, b) {
        console.log('sorting price');
       // sort mechanics here
      }
  });

然而，它在 list.js 初始化时执行（不需要） 并且在按下按钮时不执行（想要）。

编辑：工作代码...

注意 ---> listjs.com

var options = {
  valueNames: [ 'price' ]
};

var userList = new List('for-sale', options);

body {
  font-family:sans-serif;
  font-size:18px;
}
td {
  padding:10px; 
}
.sold, .red{
  font-weight:bold;
  color:red;
}
.intro + .intro{
  border-bottom:1px solid #000;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

<p class="intro"><span class="red">Sold out</span> items should ALWAYS appear at the bottom of the list after being sorted - regardless of ascending or descending sort.</p><p class="intro">The button toggles ascending and descending</p>
<div id="for-sale">
  <button class="sort" data-sort="price">
    Sort by price
  </button>
  <table>
    <!-- IMPORTANT, class="list" have to be at tbody -->
    <tbody class="list">
      <tr>
        <td class="price sold">Sold out</td>
      </tr>
      <tr>
        <td class="price">90</td>
      </tr>
      <tr>
        <td class="price">10</td>
      </tr>
      <tr>
        <td class="price sold">Sold out</td>
      </tr>
      <tr>
        <td class="price">30</td>
      </tr>
      <tr>
        <td class="price">70</td>
      </tr>
      <tr>
        <td class="price">50</td>
      </tr>
    </tbody>
  </table>

</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

Answer 1

list.js 插件不支持 exceptions 排序。遗憾的是，re-ingineering 这不是我保留的选项。

在实例上调用 .sort() 函数只会再次触发排序...也许使用自定义 sortFunction... 但那是 而不是 问题的关键就在这里。

您想部分对列表进行排序，我无法想象任何自定义 sortFunction 可以做到这一点。

但是！ 您可以 re-position 在插件正确工作后的一些元素。幸运的是，list.js 生成的 re-ordering 没有延迟（由于任何影响），因此您不需要任何 setTimeout会很明显。

您只需要注册一个额外的事件侦听器。事件侦听器按照它们注册的顺序执行...所以下面的将在 list.js 之后执行。

// Code slightly adapted from the example on the list.js website
var options = {
  valueNames: ["price"]
};
var userList = new List("for-sale", options);


// Suggested solution for your issue

// Get the list element
let list = document.querySelector(".list");

// Add an event listener on the sort button
document.querySelector(".sort").addEventListener("click", () => {

  // Get an array of all the rows, based on the 'sold' class
  let rows = Array.from(list.querySelectorAll("tr"));

  // Get just the sold out ones
  let soldout = rows.filter((r) => r.querySelector(".sold"));

  // Remove all sold out rows, based on the 'sold' class
  list.querySelectorAll("sold").forEach((s) => s.closest("tr").remove());

  // Re-append them at the end of the list
  soldout.forEach((s) => list.append(s));
});

body {
  font-family: sans-serif;
  font-size: 18px;
}

td {
  padding: 10px;
}

.sold,
.red {
  font-weight: bold;
  color: red;
}

.intro+.intro {
  border-bottom: 1px solid #000;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

<p class="intro"><span class="red">Sold out</span> items should ALWAYS appear at the bottom of the list after being sorted - regardless of ascending or descending sort.</p>
<p class="intro">The button toggles ascending and descending</p>
<div id="for-sale">
  <button class="sort" data-sort="price">
    Sort by price
  </button>
  <table>
    <!-- IMPORTANT, class="list" have to be at tbody -->
    <tbody class="list">
      <tr>
        <td class="price sold">Sold out</td>
      </tr>
      <tr>
        <td class="price">90</td>
      </tr>
      <tr>
        <td class="price">10</td>
      </tr>
      <tr>
        <td class="price sold">Sold out</td>
      </tr>
      <tr>
        <td class="price">30</td>
      </tr>
      <tr>
        <td class="price">70</td>
      </tr>
      <tr>
        <td class="price">50</td>
      </tr>
    </tbody>
  </table>

</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

list.js - 在没有 jQuery 的情况下点击按钮的自定义排序功能

list.js - Custom sort function on button click without jQuery

javascript

sorting

List.js 没有 jQuery。它开箱即用。

使命：