Question

我想知道是否有可能将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");
});

我不太确定在何处或如何实现这一点。感谢任何帮助，谢谢！

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

Answer 2

实例化可排序

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

不要以不必要的方式访问dom

来压倒浏览器

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

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

通过创建html字符串来优化您的追加

你可以使用join＆amp;在你的处理程序中排成一行

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

nb：性能更好是李套装好了，但在你的情况下你需要打开后......不能说哪个更快

$sortable.sortable('refresh')

如何按字母顺序排序可排序的JQuery UI？

2 个答案: