Multiple Sort in List.js

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，最後由order_page。

在Firefox中我試圖從不太重要，更重要的順序排序列表，似乎工作，但這並沒有在Chrome中工作：

// 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" 
}); 

# .... 

我知道List.js不支持現在多種排序，但我讀了支持自定義排序功能。 任何人都可以教/如何建立自定義排序功能？

---

編輯：

感謝@Dekel我構建使用List.js與自定義排序功能與4級之類的我自己的方法。 它適用於爲List.js.指定的單個排序類型（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），以每個值它din't工作。 我報告我的代碼更新與此改進：

/** 
* 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} firstOrder [Order type: asc || desc] 
* @param {String} secondOrder [Order type: asc || desc] 
* @param {String} thirdOrder [Order type: asc || desc] 
* @param {String} fourthOrder [Order type: asc || desc] 
* @return {}    [] 
*/ 
var sortList = function(list, 
    first, second, third, fourth, 
    firstOrder, secondOrder, thirdOrder, fourthOrder, 
) { 
    console.log("ListManager sort:", list, first, second, third, fourth); 
    // 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 if asc or desc 
    if (Utility.empty(firstOrder)) { 
     // Set order 
     firstOrder = "desc"; 
    } 

    // Check order if asc or desc 
    if (Utility.empty(secondOrder)) { 
     // Set order 
     secondOrder = "desc"; 
    } 

    // Check order if asc or desc 
    if (Utility.empty(thirdOrder)) { 
     // Set order 
     thirdOrder = "desc"; 
    } 

    // Check order if asc or desc 
    if (Utility.empty(fourthOrder)) { 
     // Set order 
     fourthOrder = "desc"; 
    } 

    // Make list compatible 
    first = "order_" + first; 
    second = "order_" + second; 
    third = "order_" + third; 
    fourth = "order_" + fourth; 
    // Make ascending descending compatible 
    firstAsc = firstOrder === "asc" ? true : false; 
    secondAsc = secondOrder === "asc" ? true : false; 
    thirdAsc = thirdOrder === "asc" ? true : false; 
    fourthAsc = fourthOrder === "asc" ? true : false; 

    console.log("List Sort: ", first, second, third, fourth); 
    console.log("List Asc: ", firstAsc, secondAsc, thirdAsc, fourthAsc); 

    // Call sort method of List.js 
    list.sort('', {order: '', 
     sortFunction: 
      function(a, b) { 
       // Compare values with field requested 
       return _compareIntegerStringDate(a, b, first, firstAsc) 
        || _compareIntegerStringDate(a, b, second, secondAsc) 
        || _compareIntegerStringDate(a, b, third, thirdAsc) 
        || _compareIntegerStringDate(a, b, fourth, fourthAsc); 
      } 
     } 
    ); 
} 

/** 
* 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] 
* @param {Boolean} isAscending [Determinate if is ascending order] 
* @return {Integer}    [-X || 0 || +X] 
*/ 
var _compareIntegerStringDate = function(a, b, field, isAscending) { 
    console.log(field + " isAscending " + isAscending); 
    if (Utility.isInt(a.values()[field])) { 
     // Compare integer 
     return isAscending 
      ? a.values()[field] - b.values()[field] 
      : b.values()[field] - a.values()[field]; 
    } 
    else if(Utility.isDate(a.values()[field], "YYYY-MM-DD HH:mm:ss")){ 
     // Compare Date 
     return isAscending 
      ? Date.parse(a.values()[field]) - Date.parse(b.values()[field]) 
      : Date.parse(b.values()[field]) - Date.parse(a.values()[field]); 
    } 
    else { 
     // Compare strings 
     return isAscending 
      ? b.values()[field].localeCompare(a.values()[field]) 
      : a.values()[field].localeCompare(b.values()[field]); 
    } 
} 

任何建議，以解決這一問題？

非常感謝！

Answer 1

List.js支持編寫自己的sort功能：

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

基本上sort function有兩個參數 - 從列表中兩個元素，並加以比較。如果第一個元素應該是第一個，那麼函數應該返回-1。如果第二項應首先，函數應該返回1，如果它們相等，函數應該返回0

的List.js庫爲您提供了a.values()內的所有價值的名字，所以你可以用它們爲您比較。

在下面的例子中，我的名字（ASC）和年份（遞減）創造了名字和年份列表和sort功能排序。

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; 
 
         } 
 
        } 
 
        })

<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>