Сортировка Jquery - руководство по сортировке - PullRequest
Новая
       14

Сортировка Jquery - руководство по сортировке

2 голосов
/ 30 декабря 2011

Как можно сортировать listitems с sortList[0] или sortList[1]?

пример: http://jsfiddle.net/wmaqb/20/

HTML 

 <div id="sortable">        
    <div id="sort_18b0c79408a72">Berlin</div>
    <div id="sort_dkj8das9sd98a">Munich</div>
    <div id="sort_skd887f987sad">Browntown</div>
    <div id="sort_54asdliöldawf">Halle</div>
    <div id="sort_f5456sdfefsdf">Hamburg</div>     
</div>

<input id="sortList0Bt" type="button" value="sortList0" />
<input id="sortList1Bt" type="button" value="sortList1" />

JS 

sortList= new Array();

sortList[0] = {};
sortList[0]['18b0c79408a72'] = 6;
sortList[0]['dkj8das9sd98a'] = 9;
sortList[0]['skd887f987sad'] = 3;
sortList[0]['54asdliöldawf'] = 1;
sortList[0]['f5456sdfefsdf'] = 5;

sortList[1] = {};     
sortList[1]['18b0c79408a72'] = 1;
sortList[1]['dkj8das9sd98a'] = 2;
sortList[1]['skd887f987sad'] = 3;
sortList[1]['54asdliöldawf'] = 4;
sortList[1]['f5456sdfefsdf'] = 5;   

$("#sortable").sortable();

$('#sortList0Bt').click(function() {  sortIt(sortList[0]);   });
$('#sortList1Bt').click(function() {  sortIt(sortList[1]);   });

JS - функция сортировки 

function sortIt(sortList)
{
   var mylist = $('#sortable');
   var listitems = mylist.children('div').get();

   listitems.sort(function(a, b)
   {
        // --------------- >>> HERE <<< --------------
   }); 

   $.each(listitems, function(idx, itm) { mylist.append(itm); });
}

Заранее спасибо!

1 Ответ

1 голос
/ 30 декабря 2011

В принципе, вам нужны несколько кнопок, которые сортируют один и тот же список по-разному, если я вас правильно понимаю?

Я бы предложил изменить следующее: 

<input id="sortList0Bt" class="sortbutton" type="button" value="sortList0" />
<input id="sortList1Bt" class="sortbutton" type="button" value="sortList1" />

$('.sortbutton').click(function() {  
    var id = parseInt($(this).val().replace("sortList","")); 
    //The above gives you "0" or "1" which is then parsed to an int
    sortIt(sortList[id]);  
});

Теперь у вас нет жестко запрограммированной обработки кликов, только сами кнопки.

Кажется, довольно неэффективно вручную создавать массивы сортировки, как вы. Я не уверен, сколько у вас свободы при использовании .sortable() или с идентификаторами div (эти идентификаторы сами по себе не делают его более понятным), но я бы посоветовал сделать это с помощью классов или добавить элемент в div, который ваш Функция сортировки может использовать для их упорядочения.

например:. 

<div id="sort_18b0c79408a72">
    Berlin
    <input type="hidden" class="sort_me_for_button_0" id="0_1">
    <input type="hidden" class="sort_me_for_button_1" id="1_4">
</div>

Если нажать кнопку 0, элемент будет отображаться на 1-м месте. Если нажать кнопку 1, элемент будет отображаться на 4-м месте. Полное написание этого потребует некоторого количества мозгов, но я думаю, что это самый эффективный и понятный способ справиться с этим.

Чтобы дать вам представление о том, как бы вы их отсортировали: 

<div id="mysortedlist"></div>

function sortIt(id) { //not the sortList, just the 0 or 1 int we parsed earlier.
    var number_of_items = $(".sort_me_for_button_"+id).length; //Now we know how many items there are to sort.

    for (int i = 1; i < number_of_items + 1; i++) {
        $("#mysortedlist").append( $("#" + id + "_" + i).parent() ); //the parent() is the div in which the hidden field resides.
    };

    $("#sortable").html($("#mysortedlist").html());
}
...