Как изменить порядок в списке, нажав на ссылку или кнопку? - PullRequest
Новая
       11

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

0 голосов
/ 03 апреля 2012

Мне нужно переместить некоторые выбранные элементы из списка, нажав на ссылку или кнопку.

Предоставление пользователю 4 варианта: Поместите все выбранные элементы один раз назад или вперед или вместо этого поместите все в верхнюю часть списка или в нижнюю часть списка.

Я нашел используемый мной плагин Jquery, который называется jquery.tinysort.js

На самом деле, мне не нужно использовать этот плагин, это может быть любой плагин или код, просто нужно работать правильно.

Перейдите по ссылке, чтобы увидеть демо http://jsfiddle.net/dkwZZ/

Следуйте html-коду: 

    <div>
        <p>
            <a onclick="$('ul#ordenar>li').tsort({attr:'id'});">REFRESH ORDER</a> or 
            <a onclick="$('ul#ordenar>li').tsort('div[class=checkTrue]');">ALL SELECTED TO TOP</a> or 
            <a onclick="$('ul#ordenar>li').tsort('div[class=checkFalse]');">ALL SELECTED TO BOTTOM</a> or 
            <a>ALL SELECTED ONCE UP</a> or
            <a>ALL SELECTED ONCE DOWN</a> 
        </p>
        <ul class="" id="ordenar">
            <li id="0"><div class="checkTrue"></div>checkTrue teste0</li>
            <li id="1"><div class="checkFalse"></div>checkFalse teste1</li>
            <li id="2"><div class="checkFalse"></div>checkFalse teste2</li>
            <li id="3"><div class="checkTrue"></div>checkTrue teste3</li>
            <li id="4"><div class="checkFalse"></div>checkFalse teste4</li>
            <li id="5"><div class="checkTrue"></div>checkTrue teste5</li>
        </ul>
    </div>

Когда ВСЕ ВЫБРАНЫ ОДИН РАЗ, порядок списка должен быть: 

        <ul class="" id="ordenar">
            <li id="0"><div class="checkTrue"></div>checkTrue teste0</li>
            <li id="1"><div class="checkFalse"></div>checkFalse teste1</li>
            <li id="3"><div class="checkTrue"></div>checkTrue teste3</li>
            <li id="2"><div class="checkFalse"></div>checkFalse teste2</li>
            <li id="5"><div class="checkTrue"></div>checkTrue teste5</li>             
            <li id="4"><div class="checkFalse"></div>checkFalse teste4</li>
        </ul>

Когда ВСЕ ВЫБРАНЫ ОДИН РАЗ ВНИЗ, порядок списка должен быть: 

        <ul class="" id="ordenar">
            <li id="1"><div class="checkFalse"></div>checkFalse teste1</li>
            <li id="0"><div class="checkTrue"></div>checkTrue teste0</li>
            <li id="2"><div class="checkFalse"></div>checkFalse teste2</li>
            <li id="4"><div class="checkFalse"></div>checkFalse teste4</li>
            <li id="3"><div class="checkTrue"></div>checkTrue teste3</li>
            <li id="5"><div class="checkTrue"></div>checkTrue teste5</li>
        </ul>

Буду вечно благодарен, если кто-нибудь сможет мне помочь. Ура !!!

1 Ответ

1 голос
/ 03 апреля 2012

Я думаю, я понял это сейчас, вот что-то, что должно сортировать ваши элементы без плагина.

FIDDLE 

var ul=$("#ordenar");

function sortList(ul, order) {
    var list=ul.children("li").get();
    switch(order) {
        case 'id' :
            list.sort(function(a, b) {
               var compA = $(a).attr('id'), compB = $(b).attr('id');
               return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
            });
            $.each(list, function(idx, itm) { ul.append(itm); });
            break;
        case 'class=True' :
            list.sort(function(a, b) {
                var compA = $(b).children(':first').attr('class'), 
                    compB = $(a).children(':first').attr('class');
               return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
            });
            $.each(list, function(idx, itm) { ul.append(itm); });
            break;
        case 'class=False' :
            list.sort(function(a, b) {
                var compA = $(a).children(':first').attr('class'), 
                    compB = $(b).children(':first').attr('class');
               return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
            });
            $.each(list, function(idx, itm) { ul.append(itm); });
            break;
        case 'one-up' :
            $.each(list, function() {
                if ($(this).children(':first').hasClass('checkTrue')) {
                    var prev = $(this).prev();
                    if (prev.length&&prev.children(':first').hasClass('checkFalse')) {prev.before($(this));}
                }
            });
            break;
        case 'one-down' :
            $.each(list, function() {
                if ($(this).children(':first').hasClass('checkTrue')) {
                    var next = $(this).next();
                    if (next.length&&next.children(':first').hasClass('checkFalse')) {next.after($(this));}
                }
            });
            break;
    }
}

Затем прикрепите некоторые идентификаторы на эти <a> элементов и привязывайте щелчки, используйте protectDefault, если у вас есть проблемы с перепрыгиванием окна вверх или другие проблемы с якорями. 

$("#refresh").on('click', function() {sortList(ul, 'id');});
$("#to_top").on('click', function() {sortList(ul, 'class=True');});
$("#to_bot").on('click', function() {sortList(ul, 'class=False');});
$("#once_up").on('click', function() {sortList(ul, 'one-up');});
$("#once_down").on('click', function() {sortList(ul, 'one-down');});
...