Cách sắp xếp theo thứ tự bảng chữ cái một giao diện người dùng JQuery có thể sắp xếp được?

Question

Tôi đã tự hỏi nếu có thể có một giao diện người dùng JQuery mặc định sắp xếp được sắp xếp theo thứ tự bảng chữ cái. Nếu vậy, nó cũng có thể giữ cho nó sắp xếp theo thứ tự bảng chữ cái trong thời gian thực nếu tôi thêm các mục vào sắp xếp? Dưới đây là mã của tôi:

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

Tôi không hoàn toàn chắc chắn nơi hoặc cách thực hiện điều này. Bất kỳ trợ giúp được đánh giá cao, cảm ơn!

Answer 1

Bạn cần tinh chỉnh nó để làm cho nó sắp xếp theo nhu cầu của bạn.

Hãy thử điều này: - Phương pháp loại Fiddle

Sử dụng tùy chỉnh

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

} 

Gọi nó trong của bạn có thể phân loại của tạo sự kiện Create và nhấp chuột lên nút

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

Hoặc Mở rộng jquery ui phụ tùng sắp xếp được để bao gồm logic sắp xếp tùy chỉnh của bạn.

Answer 2

thuyết minh sắp xếp được

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

không lấn át trình duyệt với truy cập không cần thiết để các dom

trước khi xử lý sự kiện, bộ nhớ cache đầu vào của bạn

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

tối ưu hóa phụ thêm của bạn bằng cách tạo ra một html chuỗi

bạn có thể sử dụng tham gia & làm điều đó trong một dòng trong xử lý của bạn

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

nb: Perf sẽ tốt hơn là bộ li được bao bọc, nhưng trong trường hợp của bạn, bạn sẽ cần phải unwrap sau khi ... không thể nói đó sẽ là nhanh hơn

$sortable.sortable('refresh')