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

【问题标题】：Add select all and unselect all buttons to jQuery sortable and draggable multiselect将全选和取消全选按钮添加到 jQuery 可排序和可拖动的多选
【发布时间】：2012-09-14 12:39:00
【问题描述】：

我正在使用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>

但它不会工作......

【问题讨论】：

标签： jquery spring-mvc draggable multi-select

【解决方案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>

【讨论】：