如何按字母顺序对 JQuery UI sortable 进行排序？

Question

我想知道是否可以使JQuery UI sortable默认按字母顺序排序。如果可以的话，是否也可以在实时添加可排序项时保持按字母顺序排序？以下是我的代码：

// Adds item to sortable list
$(".addButton").click(function(e) {
    e.preventDefault();
    // set var item to be the string inputted by the user
    var item = $("input[name='brewItem']").val();
    // parses input string, splitting at commas into liArray containing substrings as elements
    var liArray = item.split(", ");
    // for loop to add each brew to the sortable list (length-1 because last element in array is empty string)
    for (var i = 0; i < liArray.length-1; i++) {
        // sets var $li to the string in the ith index of liArray
        var $li = $("<li class='ui-state-default'/>").text(liArray[i]);



        // adds var $li to gui
        $("#sortable").append($li);
    };
    // refreshes the page so var $li shows up
    $("#sortable").sortable("refresh");
});

我不太确定在哪里或如何实施这个。非常感谢您的帮助！

- sbru

Answer 1

你需要进行微调以使其按照你的需求排序。

尝试这个：- Fiddle 使用自定义排序方法。

 function sort() {
    var sortableList = $('#sortable');
    var listitems = $('li', sortableList);

    listitems.sort(function (a, b) {

        return ($(a).text().toUpperCase() > $(b).text().toUpperCase())  ? 1 : -1;
    });
    sortableList.append(listitems);

}

在你的可排序元素的创建事件Create和按钮点击事件中调用它。

$("#sortable").sortable({
    create: function (event, ui) {
        sort();
    }
});

或者扩展jQuery UI可排序小部件以包含您的自定义排序逻辑。

- PSL

---

看起来这个函数只适用于列表中有13个或更少的项目，因为“使用>比较两个字符串会返回一个布尔值，但sort期望一个数字。”参见--〉http://stackoverflow.com/questions/28246809/alphabetically-sort-elements-in-sortable-list-with-over-13-items#28246860 - Wesley Smith

@DelightedD0D 谢谢，我从来不知道我写过这个，那是很久以前的事了。虽然我现在没有使用localecompare，因为考虑到你评论中链接的答案，它对我来说不合适，所以我现在返回数字。 - PSL

没问题，非常感谢你提供的函数，如果没有你的答案指导，我就无法让我的程序正常运行。 - Wesley Smith

不，实际上谢谢你！！ :) 我之前的回答中没有意识到错误.. :D - PSL

Answer 2

实例化可排序

var $sortable =$("#sortable").sortable(options);

不要过度访问DOM以避免浏览器过载

在事件处理程序之前缓存您的输入

var $brew=$("input[name='brewItem']");

通过创建HTML字符串来优化您的附加操作

您可以在处理程序中使用join并在一行中执行它

$('<li>'+ $brew.val().split(", ").join('</li><li>')+'</li>').appendTo($sortable) ;

注意：如果li集合被包装，性能会更好，但在您的情况下，您需要在取消包装后进行操作...无法确定哪种方法更快

$sortable.sortable('refresh')   

- mikakun