0

http://jqueryui.com/demos/sortable/#empty-listsを使用して、ユーザーが選択できる要素のリストをレンダリングしています。しかし、今では2つのボタンを実装する必要があります.1つはすべてを選択するため(つまり、すべての要素を左から右に移動します)、もう1つはすべてを選択解除します(つまり、すべての要素を右から左に移動します)が、方法がよくわかりませんそれを行う...

スクリプト部分は次のとおりです。

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

しかし、それはうまくいきません...

4

1 に答える 1

0

さて、最終的に私はそれを行う方法を考え出しました。

スクリプト部分は次のとおりです。

$(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>
于 2012-09-17T11:04:15.637 に答える