1

我正在使用 vanilla JS 脚本list.js并尝试实现自定义排序功能。

我一直在使用List APIsort中的方法，正常排序没有问题，但是需要为几种情况创建自定义排序，但是因为他从未提供过示例，所以我不确定如何去做。

例如我有这个代码：

var options = {
    valueNames: [ 'date', 'amount', 'company', 'name' ]
};

// Instantiate our list
var myList = new List('mylist', options);

// Set our default sort
myList.sort('date', {order: "desc"});

// Control our own sorting via the links

$('a.sort').on('click', function(event) {

    // Prevent default action
    event.preventDefault();

    var element = $(event.target);

    // Get sorting method
    var method = element.attr('data-sort');

    // Work out what way we want to order the results

    switch (method) {
        case 'date':
        case 'amount':
            var order = 'desc';
            break;
        case 'company':
        case 'name':
            var order = 'asc';
            break;
        default:
            var order = 'desc';
    }

    // Sort the data
    myList.sort(method, {order: order, sortFunction: function(a, b, options){

    }});

    return false; // IE 8

});

他从未说明该函数的预期签名，但我计算出它有 3 个填充数据的参数，前两个似乎包含排序列表中的元素，第三个具有某种选项。

我已阅读有关使用自定义排序功能的信息，但不确定如何在此处补充它们。

我们需要的一个例子是我们有一个日期列表，例如：

  • 2015春夏
  • 2014春夏
  • 2013 冬季
  • 2005 年秋季

它应该首先按最高数字排序（在本例中为 2015 年），然后按此顺序从头到尾进行季节排序：冬季、秋季、春季/夏季。

是否可以为类似的东西进行自定义排序，如果可以，如何使用此脚本实现？

4

1 回答 1

1

a如果应该在之前排序函数应该返回一个负数b，如果不应该更改则返回 0，或者如果b应该在之前返回正数a。这是一种可能的实现，假设日期是格式为 的可预测字符串YYYY {{season}}。

// Putting the season in the keys for ease of use and assigning them values so we know which one comes first.
var seasonMap = {
    'Spring/Summer': 0,
    Winter: 1,
    Fall: 2
};

var order = 'asc'; // ascending or descending

function sortFunction(a, b) {
    var coefficient = order === 'asc' ? 1 : -1; // If the order you pass it is 'asc', the a positive coefficient will retain this function's ascending sorting order; otherwise it will invert this function.

    // Convert the dates into arrays by splitting them by a space ' '
    var aDateComponents = a._values.date.split(' '),
        bDateComponents = b._values.date.split(' ');

    // The 0th value of the array is the year; additionally convert it into a Number instead of a String
    var aYear = Number(aDateComponents[0]),
        bYear = Number(bDateComponents[0]);

    // The 1st value of the array is the season; look up the value from the map object we created in the beginning so we know which season comes after which
    var aSeasonNumber = seasonMap[aDateComponents[1]],
        bSeasonNumber = seasonMap[bDateComponents[1]];

    if (aYear !== bYear) {
        // return aYear - bYear. If a > b this will put a after b. The coefficient will invert it if we're sorting descending.
        return coefficient * (aYear - bYear);
    }

    if (aSeasonNumber !== bSeasonNumber) {
        // Same thing here. Since the season was mapped to a number, we know which season comes first and can return a positive or negative difference.
        return coefficient * (aSeasonNumber - bSeasonNumber);
    }

    // Don't change the order otherwise.
    return 0;
}

您还应该首先验证日期字符串，并检查它是否是有效的季节。

于 2015-08-09T14:24:24.607 回答