如何在更改输入[type= "radio"]上按状态编号，日期和时间对列表进行排序？

Question

我需要帮助来实现这个排序函数。我发现了一些关于排序列表的线程，但我无法将它们适应以下情况：

• 按状态排序时：

按状态排序>按日期排序>按时间排序

• 按状态排序时

按日期排序>每个日期按时间排序

• 按更改日期排序时

按更改日期排序>每个更改日期按更改时间排序

HTML排序菜单

<div class="sort">
    <label><input type="radio" name="sort" id="sort-1"/>By Status</label>
    <label><input type="radio" name="sort" id="sort-2"/>By Date</label>
    <label><input type="radio" name="sort" id="sort-3"/>By Date of Change</label>
</div>

HTML列表

<ul>
    <li><a data-status="5" data-date="01/02/2013" data-time="11:25" data-change-date="02/02/2013" data-change-time="10:25"></a></li>
    <li><a data-status="4" data-date="09/12/2014" data-time="02:54" data-change-date="10/12/2014" data-change-time="04:09"></a></li>
    <li><a data-status="5" data-date="09/02/2013" data-time="19:28" data-change-date="09/02/2013" data-change-time="21:29"></a></li>
    <li><a data-status="1" data-date="01/02/2013" data-time="00:42" data-change-date="01/02/2013" data-change-time="15:22"></a></li>
    <li><a data-status="4" data-date="08/11/2014" data-time="05:31" data-change-date="09/11/2014" data-change-time="12:10"></a></li>
    <li><a data-status="4" data-date="21/11/2014" data-time="15:27" data-change-date="21/11/2014" data-change-time="19:37"></a></li>
    <li><a data-status="3" data-date="22/10/2013" data-time="19:25" data-change-date="26/10/2013" data-change-time="12:41"></a></li>
    <li><a data-status="2" data-date="15/04/2014" data-time="14:30" data-change-date="16/04/2014" data-change-time="16:50"></a></li>
    <li><a data-status="5" data-date="05/02/2013" data-time="13:22" data-change-date="05/02/2013" data-change-time="14:25"></a></li>
</ul>

jQuery

$('.sort').on('change','[name="sort"]',function(){
    if($(this).attr('id') == 'sort-1'){
        //sort by STATUS > each status order by DATE > each date order by TIME
    }
    if($(this).attr('id') == 'sort-2'){
        //sort by DATE > each date sort by TIME
    }
    if($(this).attr('id') == 'sort-3'){
        //sort by DATE OF CHANGE > each date of change sort by TIME OF CHANGE
    }
});

JSFiddle:http://jsfiddle.net/LGVentura/f7702mu9/

请提出建议。

Answer 1

我已经使用jQuery的sort函数编写了一个解决方案：

$('.sort').on('change', '[name="sort"]', function() {
    var sorter = $(this).attr('id');
    $('#sortThis li').sort(function(a, b) {
        /*
        Date d/m/Y to Y-m-d convertion :
        "09/12/2014"
            .split('/')    => ["09", "12", "2014"]
            .reverse()     => ["2014", "12", "09"]
            .join('-')     => "2014-12-09"
         This way we can compare dates alphabetically
        */        
        var astatus = $('a', a).data('status'),
            bstatus = $('a', b).data('status'),
            adate = $('a', a).data('date').split('/').reverse().join('-'),
            bdate = $('a', b).data('date').split('/').reverse().join('-'),
            atime = $('a', a).data('time'),
            btime = $('a', b).data('time');
        if (sorter == 'sort-status') { // sort by status > date > time
            if (astatus == bstatus) {
                if (adate == bdate) {
                    return atime < btime ? 1 : -1;
                } else {
                    return adate < bdate ? 1 : -1;
                }
            } else {
                return astatus < bstatus ? 1 : -1
            }
        } else if (sorter == 'sort-date') { // sort by date > time
            if (adate == bdate) {
                return atime < btime ? 1 : -1;
            } else {
                return adate < bdate ? 1 : -1;
            }
        } else if (sorter == 'sort-change') { // sort by change date > change time
            var achangedate = $('a', a).data('change-date').split('/').reverse().join('-'),
                bchangedate = $('a', b).data('change-date').split('/').reverse().join('-'),
                achangetime = $('a', a).data('change-time'),
                bchangetime = $('a', b).data('change-time')
            ;
            if (achangedate == bchangedate) {
                return achangetime < bchangetime ? 1 : -1;
            } else {
                return achangedate < bchangedate ? 1 : -1;
            }
        }
    }).appendTo('#sortThis');
});

您可以在这个JSFiddle中看到它的作用

Answer 2

检查此解决方案：http://jsfiddle.net/2nzkjqch/

jQuery:

$(function() {
    $('.sort').on('change','[name="sort"]',function(){
        if($(this).attr('id') == 'sort-1'){
            //sort by STATUS > each status order by DATE > each date order by TIME
            sortStatus()
        }
        if($(this).attr('id') == 'sort-2'){
            //sort by DATE > each date sort by TIME
            sortDate()
        }
        if($(this).attr('id') == 'sort-3'){
           sortDateChange()
        }
    });

})
function sortStatus()
{
   var $wrapper = $('ul li');
    $wrapper.sort(function (a, b) {
        var sA =parseInt( $(a).find('a').attr('data-status'),10 );
        var sB =parseInt( $(b).find('a').attr('data-status'),10 );
        return sA < sB ? 1 : -1;
    })
    $('ul').append($wrapper)
}
function sortDate()
{
    var $wrapper = $('ul li');
    $wrapper.sort(function (a, b) {
        var dA = $(a).find('a').attr('data-date')
        var dB = $(b).find('a').attr('data-date')
        var tA = $(a).find('a').attr('data-time');
        var tB = $(b).find('a').attr('data-time');        
        var parts = dA.split("/");        
        var dtA = new Date(parts[2]+'-'+parts[1]+'-'+ parts[0]+'T'+tA).getTime();
        var parts = dB.split("/");        
        var dtB = new Date(parts[2]+'-'+parts[1]+'-'+ parts[0]+'T'+tB).getTime();
        return dtA < dtB ? 1 : -1;
    })
    $('ul').append($wrapper)        
}
function sortDateChange()
{        
    var $wrapper = $('ul li');
    $wrapper.sort(function (a, b) {
        var dA = $(a).find('a').attr('data-change-date')
        var dB = $(b).find('a').attr('data-change-date')
        var tA = $(a).find('a').attr('data-change-time');
        var tB = $(b).find('a').attr('data-change-time');
        var parts = dA.split("/");        
        var dtA = new Date(parts[2]+'-'+parts[1]+'-'+ parts[0]+'T'+tA).getTime();

        var parts = dB.split("/");        
        var dtB = new Date(parts[2]+'-'+parts[1]+'-'+ parts[0]+'T'+tB).getTime();

        return dtA < dtB ? 1 : -1;
    })
   $('ul').append($wrapper)        
}