2013-04-15 14 views
6

Zastanawiam się, czy możliwe jest posortowanie alfabetycznego sortowania domyślnego interfejsu JQuery. Jeśli tak, to czy można również sortować alfabetycznie w czasie rzeczywistym, jeśli dodaję pozycje do sortowni? Poniżej znajduje się mój kod:Jak sortować alfabetycznie JQuery UI do sortowania?

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

Nie jestem do końca pewien, gdzie i jak to wdrożyć. Jakakolwiek pomoc się przyda, dzięki!

Odpowiedz

14

Musisz go dostosować, aby sortować według potrzeb.

Spróbuj tego: - Fiddle

Wykorzystanie niestandardowych Metoda sortowania

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); 

} 

wywołać ją z sortable Utwórzmy zdarzenie Create i kliknięcia przycisku

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

lub rozszerzyć jQuery UI sortable widżet uwzględnij swoją niestandardową logikę sortowania.

+0

Wygląda na to, że ta funkcja działa tylko wtedy, gdy lista zawiera 13 lub mniej elementów, ponieważ ** "Porównywanie dwóch łańcuchów z> zwraca wartość boolowską, ale sortowanie oczekuje liczby." ** Zobacz -> http://stackoverflow.com/questions/28246809/alphabetically-sort-elements-in-sortable-list-with-over-13-items#28246860 – DelightedD0D

+0

@ DelightedD0D Dziękuję, nigdy nie wiedziałem, że to napisałem, to była długa chwila . Chociaż nie używam localecompare, ponieważ będzie to dla mnie nieodpowiednie, aby zaktualizować je, biorąc pod uwagę link do odpowiedzi w komentarzu, teraz zwracam numer. – PSL

+0

Nie ma problemu, i dziękuję za funkcję w pierwszej kolejności, nie mogłem dostać moje dzieje bez twojej odpowiedzi, by mnie poprowadzić – DelightedD0D

0

instancję sortable

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

nie przytłaczać niepotrzebnymi przeglądarkę dostęp do DOM

przed obsługi zdarzeń, pamięć podręczną wejście

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

optymalizacji dołączanie tworząc html ciąg

można użyć dołączyć & zrobić w linii w swojej obsługi

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

nb: perf byłoby lepiej jest zbiorem li został zawinięty, ale w twoim przypadku trzeba by odwinąć po ... Nie można powiedzieć, co byłoby szybszy

$sortable.sortable('refresh') 
Powiązane problemy