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

我想知道是否有可能按字母順序排序的JQuery UI排序默認值。如果是這樣，如果我將項目添加到排序中，是否也可以實時按字母順序排序？以下是我的代碼：如何按字母順序排序可排序的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"); 
});

我不太確定在何處或如何實現此目的。任何幫助表示讚賞，謝謝！

來源

2013-04-15 sbru

你需要調整它，使其根據需要進行排序。

試試這個： - 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的排序小部件包括您的自定義排序邏輯。

來源

2013-04-15 04:50:07 PSL

看來這個函數只有在列表中有13個或更少的項時才起作用，因爲**「用兩個字符串比較返回一個布爾值，但排序需要一個數字。」**請參閱 - > http：/ /stackoverflow.com/questions/28246809/alphabetically-sort-elements-in-sortable-list-with-over-13-items#28246860 – DelightedD0D

@ DelightedD0D謝謝，我從來不知道我寫過這些，很久以前。雖然我不使用localecompare，因爲考慮到您的評論中的鏈接答案，我不適合更新它，因此我現在正在返回號碼。 – PSL

沒問題，並且首先感謝您的功能，如果沒有您的回答引導我，我不會得到我的幫助 – DelightedD0D

實例化排序

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

不壓倒事件處理程序之前，將DOM

不必要的訪問瀏覽器，緩存您輸入

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

通過創建一個HTML優化您的追加字符串

您可以使用加入&做一個線在你的處理器

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

注：PERF倒不如說是李集被包裹，但在你的情況下，你需要解開後......不能說這將是更快

$sortable.sortable('refresh')

來源

2013-04-15 03:59:52 mikakun

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

回答

相關問題