如何按字母顺序对可排序的 JQuery UI 进行排序？答案

【问题标题】：How to alphabetically sort a JQuery UI sortable?如何按字母顺序对可排序的 JQuery UI 进行排序？
【发布时间】：2013-04-07 01:47:00
【问题描述】：

我想知道是否可以让 JQuery UI 可排序默认为按字母顺序排序。如果是这样，如果我将项目添加到可排序中，是否也可以实时按字母顺序排序？以下是我的代码：

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

我不太确定在哪里或如何实现这一点。任何帮助表示赞赏，谢谢！

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable

【解决方案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 可排序小部件以包含您的自定义排序逻辑。

【讨论】：

这个函数似乎只有在列表中包含 13 个或更少的项目时才有效，因为 "Comparing two strings with > 返回一个布尔值，但 sort 需要一个数字。" 见 --> stackoverflow.com/questions/28246809/…
@DelightedD0D 谢谢你，我从来不知道我写过这个，这是很久以前的事了。虽然我没有使用 localecompare，因为考虑到您评论中的链接答案，我不适合更新它，但我现在正在返回号码。
没问题，首先感谢您提供的功能，如果没有您的回答指导我，我的工作就无法运行
不，事实上谢谢！ :) 我不会在我的旧答案中意识到错误.. :D

【解决方案2】：

实例化可排序

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

不要因为对 dom 的不必要访问而使浏览器不堪重负

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

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

通过创建一个 html 字符串来优化你的附加

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

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

nb ：如果 li 集被包装，性能会更好，但在你的情况下，你需要在之后解包......不能说哪个会更快

$sortable.sortable('refresh')

【讨论】：