8

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

これをどこでどのように実装するかはよくわかりません。どんな助けでも大歓迎です、ありがとう！

4

2 に答える 2

17

必要に応じて並べ替えるには、微調整する必要があります。

これを試してください:-フィドル

カスタムソート方法を使用する

 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-15T04:50:07.827 に答える
0

ソート可能なインスタンスを作成する

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

dom への不必要なアクセスでブラウザを圧倒しないでください

イベントハンドラーの前に、入力をキャッシュします

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

html 文字列を作成して追加を最適化する

ハンドラーの行で join & do it を使用できます

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

nb：パフォーマンスは、liセットがラップされた方が良いでしょうが、あなたの場合、ラップを解除する必要があります...どちらが速いかはわかりません

$sortable.sortable('refresh')
于 2013-04-15T03:59:52.847 に答える