jquery - 将全选和取消全选按钮添加到 jQuery 可排序和可拖动的多选

Question

我正在使用http://jqueryui.com/demos/sortable/#empty-lists呈现用户可以选择的元素列表。但是现在我必须实现 2 个按钮：一个选择全部（即从左到右移动所有元素）和另一个取消全选（即从右到左移动所有元素）但我不太确定如何去做...

这是脚本部分：

<script>
    $(function() {
        $("ul.droptrue").sortable({
            connectWith: 'ul',
            opacity: 0.6,
            update : updatePostOrder
        });

        $("#listaCentrosDisponibles, #listaCentrosSeleccionados").disableSelection();
        $("#listaCentrosDisponibles, #listaCentrosSeleccionados").css('minHeight',$("#listaCentrosDisponibles").height()+"px");
        updatePostOrder();
    }); 
    function updatePostOrder() { 
        var arr = [];
        $("#listaCentrosSeleccionados li").each(function(){
            arr.push($(this).attr('id'));
        });
        $('#centrosSeleccionados').val(arr.join(','));  
    }
</script>

这是 jsp 部分（我使用 Spring MVC 和 Spring 3.1）：

<div class="listBlock">
    <ul id="listaCentrosDisponibles" class="droptrue">
        <c:forEach items="${filtro.centros}" var="centro">
            <li class="centro_draggable" id="${centro.idCentro}">${centro.nombre}</li>
        </c:forEach>
    </ul>
</div>

<div class="listBlock">
    <ul id="listaCentrosSeleccionados" class="droptrue">
    </ul>
    <form:hidden path="centrosSeleccionados" />
</div>

Filtro.centros 是包含可以选择的元素的原始列表，centrosSeleccionados 是我存储已选择元素的列表。

我试过这个：

("#quitar_todos").click(function() {
    var arrDisponibles = [];
    var arrSeleccionados = [];
    $("#listaCentrosSeleccionados li").each(function(){
        arrDisponibles.push($(this).attr('id'));
    });
    $("#listaCentrosDisponibles li").each(function(){
        arrDisponibles.push($(this).attr('id'));
    });
    $('#centrosDisponibles').val(arrDisponibles.join(','));
    $('#centrosSeleccionados').val(arrSeleccionados.join(','));
});

quitar_todos 在哪里：

<a id="quitar_todos" href="#"><span>Quitar todos</span></a>

但它不会工作...

Answer 1

好吧，最后我想出了如何去做。

这是脚本部分：

$(function() {
    $("ul.droptrue").sortable({
        connectWith: 'ul',
        opacity: 0.6,
        update : updatePostOrder
    });

    $("#listaCentrosDisponibles, #listaCentrosSeleccionados").disableSelection();
    $("#listaCentrosDisponibles, #listaCentrosSeleccionados").css('minHeight',$("#listaCentrosDisponibles").height()+"px");
    updatePostOrder();

    $("#boton_quitar_todos").click(function() {
    var arrDisponibles = [];
    var arrSeleccionados = [];
    $("#listaCentrosSeleccionados li").each(function(){
        $(this).remove();
        $(this).appendTo("#listaCentrosDisponibles");
    });
    $("#listaCentrosDisponibles li").each(function(){
        arrDisponibles.push($(this).attr('id'));
    });
    $('#listaCentrosDisponibles li').sort(sortAlpha).appendTo('#listaCentrosDisponibles');
    $('#centrosSeleccionados').val(arrSeleccionados.join(','));
});

$("#boton_seleccionar_todos").click(function() {
    var arrSeleccionados = [];
    $("#listaCentrosDisponibles li").each(function(){
        $(this).remove();
        $(this).appendTo("#listaCentrosSeleccionados");
    });
    $("#listaCentrosSeleccionados li").each(function(){
        arrSeleccionados.push($(this).attr('id'));
    });
    $('#listaCentrosSeleccionados li').sort(sortAlpha).appendTo('#listaCentrosSeleccionados');
    $('#centrosSeleccionados').val(arrSeleccionados.join(','));
});

});

function updatePostOrder() { 
    var arr = [];
    $("#listaCentrosSeleccionados li").each(function(){
        arr.push($(this).attr('id'));
    });
    $('#centrosSeleccionados').val(arr.join(','));  
}

function sortAlpha(a,b){  
    return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;  
};  

这是jsp片段：

<div class="listBlock">
    <ul id="listaCentrosDisponibles" class="droptrue">
        <c:forEach items="${filtro.centros}" var="centro">
            <li class="centro_draggable" id="${centro.idCentro}">${centro.nombre}</li>
        </c:forEach>
    </ul>
</div>

<a id="seleccionar_todos" href="#"><span>Seleccionar todos</span></a>
<a id="quitar_todos" href="#"><span>Quitar todos</span></a>

<div class="listBlock">
    <ul id="listaCentrosSeleccionados" class="droptrue">
    </ul>
    <form:hidden path="centrosSeleccionados" />
</div>