Question

我使用List.js以自定义顺序显示，搜索，过滤大量内容。

我的行是这样的

<div class="content-row">
    <div class="order_id" style="display:none;">{{$item['order']}}</div>
    <div class="order_category" style="display:none;">99999</div>
    <div class="order_source" style="display:none;">99999</div>
    <div class="order_page" style="display:none;">99999</div>
    <div class="content_date" style="display:none;">2016-11-08 11:00:00</div>
    <div class="dd-handle row-container"> I am a row </div>
</div>

我尝试按多个订单排序我的内容列表：首先按order_category排序，然后按order_source排序，然后按content_date排序，最后按{{1}排序}}

在Firefox中，我尝试将列表从不太重要的订单排序到更重要的订单，它似乎有效，但这在Chrome中不起作用：

order_page

我知道List.js现在不支持多种排序，但我读到它支持自定义排序功能。任何人都可以教我/如何构建自定义排序功能？

修改

感谢@Dekel我构建了自己的方法，该方法使用具有4级排序的自定义排序功能的List.js。它适用于为List.js指定的单一排序类型（// Options var options = { valueNames: ['content_id', 'content_date', 'order_id', 'order_category', 'order_source', 'order_page'] }; // Get list Html var listElement = $("#main_list"); // Init list obj var listInstance = new List(listElement[0], options); # .... // This works in Firefox but not in Chrome! // Order by page listInstance.sort('order_page', { order: "asc" }); // then order by date listInstance.sort('content_date', { order: "desc" }); // then order by list listInstance.sort('order_source', { order: "asc" }); // finally order by category listInstance.sort('order_category', { order: "asc" }); # ....或ASC）。我报告了我的代码：

DESC

但是，如果我尝试为每个值指定排序类型（/** * Sort a List.js list by 4 level of sort * * @param {Object} list [List.js instance] * @param {String} first [First field to sort] * @param {String} second [Second field to sort] * @param {String} third [Third field to sort] * @param {String} fourth [Fourth field to sort] * @param {String} sort [sort type: asc || desc] * @return {} [] */ var sortList = function(list, first, second, third, fourth, sort) { // If list not defined if (Utility.empty(list)) { console.error("ListManager: can't sort, list is undefined!"); // Error no list! return false; } // If first order id not defined if (Utility.empty(first)) { // Set default first = "name"; } // If second order id not defined if (Utility.empty(second)) { // Set default second = "born"; } // If third order id not defined if (Utility.empty(third)) { // Set default third = "color"; } // If fourth order id not defined if (Utility.empty(fourth)) { // Set default fourth = "lastName"; } // Check order is not defined if (Utility.empty(sort)) { // Set default order type to desc sort = "desc"; } // Make list order compatible with list.js fields first = "order_" + first; second = "order_" + second; third = "order_" + third; fourth = "order_" + fourth; console.log("List Sort: ", first, second, third, fourth); // Call sort method of List.js list.sort('', {order: sort, sortFunction: function(a, b) { // Compare values with field requested return _compareIntegerStringDate(a, b, first) || _compareIntegerStringDate(a, b, second) || _compareIntegerStringDate(a, b, third) || _compareIntegerStringDate(a, b, fourth); } } ); } /** * Compare list.js items value based on filed request. * Get correct comparison between integers, strings, or dates. * * @param {Object} a [List.js item instance] * @param {Object} b [List.js item instance] * @param {String} field [Field to compare] * @return {Integer} [-X || 0 || +X] */ var _compareIntegerStringDate = function(a, b, field) { if (Utility.isInt(a.values()[field])) { // Compare integer return b.values()[field] - a.values()[field]; } else if(Utility.isDate(a.values()[field], "YYYY-MM-DD HH:mm:ss")){ // Compare Date return Date.parse(b.values()[field]) - Date.parse(a.values()[field]); } else { // Compare strings return a.values()[field].localeCompare(b.values()[field]); } }或ASC），它就会起作用。我报告了使用此改进更新的代码：

DESC

有任何修复建议吗？

非常感谢！

Answer 1

List.js支持编写自己的sort函数：

list.sort('name', {sortFunction: function() { ... })

基本上sort function获取两个参数 - 列表中的两个元素，并进行比较。如果第一个元素应该是第一个，则该函数应返回-1。如果第二项应该是第一项，则该函数应返回1.如果它们相等，则该函数应返回0.

List.js库为您提供a.values()内的所有值名称，因此您可以将它们用于比较。

在下面的示例中，我创建了一个名称和年份的列表，sort函数按名称（ asc ）和年份（ desc ）排序。

＆＃13;

var options = {
  valueNames: [ 'name', 'born' ]
};

var usersList = new List('users', options);
usersList.sort('', {order: "desc", sortFunction: 
                    function(a, b) {
                      if (Math.abs(b.values().name.localeCompare(a.values().name)) == 1) {
                        return b.values().name.localeCompare(a.values().name)
                      } else {
                        return a.values().born - b.values().born;
                      }
                    }
                   })

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.3.0/list.min.js"></script>

<div id="users">

  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort
  </button>

  <ul class="list">
    <li>
      <h3 class="name">AAA</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">AAB</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">AAC</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">AAB</h3>
      <p class="born">1983</p>
    </li>
  </ul>

</div>

＆＃13;

List.js中的多个排序

1 个答案: