javascript - 按字母顺序/按日期对多列列表进行排序，无需像 Dropbox 那样使用 HTML/javascript/jQuery 中的表格

Question

我想在不使用表格的情况下对多列列表进行排序。我知道单列列表的解决方案，但我似乎找不到一个可以对多个 Ul/列进行排序，同时将列表/行项目保持在一起的解决方案。

最终我想做一些类似于 dropbox 为显示文件所做的事情。是的，Dropbox 不使用可排序的表格。它是一个列表而不是 tr，带有一堆 div 而不是 td。

我不想使用表格，因为表格的样式设计让我抓狂。另外，我不想使用插件(如tablesorter.js)，因为javascript有一个内置的sort()函数，所以它不能有那么多行代码。

无论如何，这是从另一个SO问题中获取的 nice single column demonstration 和 original SO reference 。

基本上，我想做 fiddle 中的内容，但能够按名称排序，例如地址，这是一个建立在第一个 fiddle 基础上的 fiddle ，您可以在其中看到我想用这个 http://jsfiddle.net/trpeters1/De8Ku/955/ 去哪里。正如您会注意到的，这个 fiddle 无法根据地址进行排序，这正是我想要找到解决方案的原因。

更新 非常感谢 eterps(见下文)，现在 fiddle 可以按多列排序。我现在想下一步包括按日期排序。这是一个 fiddle ，它尝试了这一点，但不太有效。您会注意到我尝试将innerHTML 转换为Date() 对象，但这并没有解决这个问题。 http://jsfiddle.net/trpeters1/De8Ku/983/

在这个 fiddle 中，有人可以帮助解释为什么日期排序仍然只是字母/数字而不是按日期排序吗？

Answer 1

使用您在 jsFiddle 示例中提供的代码，您可以向 span 标记添加一些标识信息，以将文本区分为列。然后您可以使用该信息进行排序。我更改了 jsFiddle 示例以使用排序函数，该函数将查看指定的列。我确信有更优雅的方法可以做到这一点，但它应该可以帮助您入门。

http://jsfiddle.net/De8Ku/976/

这是代码，以防 jsFiddle 无法工作或有人想要编辑此答案:

HTML:

<input type="button" id="test" value="sort by names"/>
<input type="button" id="test1" value="sort by address"/>

<ul id="list">
   <li ><span class="name">peter</span><span class="address"> 812 jones st.</span></li>
   <li><span class="name">zack</span><span class="address"> 512 jones st.</span></li>
   <li><span class="name">alex</span><span class="address"> 712 jones st.</span></li>
   <li><span class="name">sue</span><span class="address"> 112 jones st.</span></li>
   <li><span class="name">jenny</span><span class="address"> 912 jones st.</span></li>
</ul>

JS:

function sortUnorderedList(ul, sortDescending, sortClass) {
    if (typeof ul == "string") {
        ul = document.getElementById(ul);
    }

    var lis = ul.getElementsByTagName("LI");
    var vals = [];

    // Instead of filling an array with list items, 
    // create an array of objects that contain the list item itself, 
    // and the value from the sort-by column
    for (var i = 0, l = lis.length; i < l; i++) {
        vals.push({
            sortFieldVal: lis[i].getElementsByClassName(sortClass)[0].innerText,
            val: lis[i].innerHTML
        });
    }

    // Use a sort function to compare string values of sortFieldVal for each item
    vals.sort(function(a, b) {
        var nameA=a.sortFieldVal.toLowerCase(), nameB=b.sortFieldVal.toLowerCase()
        if (nameA < nameB) //sort string ascending
        return -1 
        if (nameA > nameB)
        return 1
        return 0 //default return value (no sorting)
    });

    if (sortDescending) vals.reverse();

    for (var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i].val;
}

window.onload = function() {
    var desc = false;
    document.getElementById("test").onclick = function() {
        sortUnorderedList("list", desc, "name");
        desc = !desc;
        return false;
    }

    document.getElementById("test1").onclick = function() {
        sortUnorderedList("list", desc, "address");
        desc = !desc;
        return false;
    }
}​