添加全选和取消全选按钮到 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 3.1中使用Spring MVC）：

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