jQuery UI Sortable, luego escribe el pedido en una base de datos

125

Quiero usar la sortablefunción jQuery UI para permitir a los usuarios establecer un orden y luego, en el cambio, escribirlo en la base de datos y actualizarlo. ¿Alguien puede escribir un ejemplo sobre cómo se haría esto?

Harry
fuente
44
toArraydaría una serie de identificadores ordenados, creo que podría ser útil. api.jqueryui.com/sortable/#method-toArray
MahanGM
1
¿Arreglaste tu problema?
Knelis
De alguna manera, preguntas como esta son las mejores en SO. Sin embargo, esta pregunta sería aplastada en 2020.
Parapluie

Respuestas:

223

La función jQuery UI sortableincluye un serializemétodo para hacer esto. Es bastante simple, de verdad. Aquí hay un ejemplo rápido que envía los datos a la URL especificada tan pronto como un elemento cambia de posición.

$('#element').sortable({
    axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');

        // POST to server using $.post or $.ajax
        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
});

Lo que esto hace es que crea una matriz de elementos utilizando los elementos id. Entonces, generalmente hago algo como esto:

<ul id="sortable">
   <li id="item-1"></li>
   <li id="item-2"></li>
   ...
</ul>

Cuando usa la serializeopción, creará una cadena de consulta POST como esta: item[]=1&item[]=2etc. Entonces, si utiliza, por ejemplo, sus ID de base de datos en el idatributo, puede simplemente iterar a través de la matriz POSTed y actualizar las posiciones de los elementos en consecuencia .

Por ejemplo, en PHP:

$i = 0;

foreach ($_POST['item'] as $value) {
    // Execute statement:
    // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value
    $i++;
}

Ejemplo en jsFiddle.

Knelis
fuente
77
Para generar ID automáticamente puede usar$("#element").children().uniqueId().end().sortable({...
Taylan
12
la documentación dice que para usar la opción de serialización, debe definir id como formato nombre_número .
parisssss
55
También puede usar estos otros caracteres según la documentación: puede usar un guión bajo, un signo igual o un guión para separar el conjunto y el número. Por ejemplo, "foo = 1", "foo-1" y "foo_1" se serializan en "foo [] = 1".
lhoess
2
Parece que no puedo hacer que esto funcione si paso varias variables de datos.
PBwebD
11

Pensé que esto podría ayudar también. A) fue diseñado para mantener la carga útil al mínimo mientras se envía de vuelta al servidor, después de cada tipo. (en lugar de enviar todos los elementos cada vez o iterar a través de muchos elementos que el servidor podría arrojar) B) Necesitaba devolver la identificación personalizada sin comprometer la identificación / nombre del elemento. Este código obtendrá la lista del servidor asp.net y luego, al ordenar, solo se enviarán 2 valores: la identificación de db del elemento ordenado y la identificación de db del elemento al lado del cual se descartó. Basado en esos 2 valores, el servidor puede identificar fácilmente la nueva posición.

<div id="planlist" style="width:1000px">
    <ul style="width:1000px">
       <li plid="listId1"><a href="#pl-1">List 1</a></li>
       <li plid="listId2"><a href="#pl-2">List 1</a></li>
       <li plid="listId3"><a href="#pl-3">List 1</a></li>
       <li plid="listId4"><a href="#pl-4">List 1</a></li>
    </ul>
    <div id="pl-1"></div>
    <div id="pl-2"></div>
    <div id="pl-3"></div>
    <div id="pl-4"></div>
</div>
<script type="text/javascript" language="javascript">
    $(function () {
        var tabs = $("#planlist").tabs();
        tabs.find(".ui-tabs-nav").sortable({
            axis: "x",
            stop: function () {
                tabs.tabs("refresh");
            },
            update: function (event, ui) {
                //db id of the item sorted
                alert(ui.item.attr('plid'));
                //db id of the item next to which the dragged item was dropped
                alert(ui.item.prev().attr('plid'));

                //make ajax call
            }
        });
    });
</script>
Kalpesh Popat
fuente
44
Las etiquetas ASP pueden ser confusas para aquellos que no están familiarizados con ellas y esto es puramente un problema de jQuery / HTML.
ggdx
1
¡Dos años más tarde! ¿Estuve ocupado?
ggdx
¿Qué sucede si el elemento movido se cae como el primer elemento de la lista?
Edson Horacio Junior
1
si algún elemento se cae, entonces el "al lado de" id = 0, action = del y plid = id del elemento sobre el que se está actuando, de lo contrario action = sort y hay 2 parámetros, el elemento se clasifica y al lado del cual se descarta . esa es la información mínima que el servidor puede usar para realizar el resto de las operaciones. Es probado y prueba patrón. Incluso tengo agregar e insertar usando el mismo patrón, solo el juego de acción y los otros 2 parámetros.
Kalpesh Popat
9

Estás de suerte, uso exactamente lo que tengo en mi CMS

Cuando desee almacenar el pedido, simplemente llame al método JavaScript saveOrder(). Hará una POSTsolicitud AJAX para saveorder.php, pero por supuesto, siempre puede publicarlo como un formulario regular.

<script type="text/javascript">
function saveOrder() {
    var articleorder="";
    $("#sortable li").each(function(i) {
        if (articleorder=='')
            articleorder = $(this).attr('data-article-id');
        else
            articleorder += "," + $(this).attr('data-article-id');
    });
            //articleorder now contains a comma separated list of the ID's of the articles in the correct order.
    $.post('/saveorder.php', { order: articleorder })
        .success(function(data) {
            alert('saved');
        })
        .error(function(data) { 
            alert('Error: ' + data); 
        }); 
}
</script>
<ul id="sortable">
<?php
//my way to get all the articles, but you should of course use your own method.
$articles = Page::Articles();
foreach($articles as $article) {
    ?>
    <li data-article-id='<?=$article->Id()?>'><?=$article->Title()?></li>
    <?
}               
?>   
</ul>
   <input type='button' value='Save order' onclick='saveOrder();'/>

En saveorder.php; Tenga en cuenta que eliminé toda verificación y verificación.

<?php
$orderlist = explode(',', $_POST['order']);
foreach ($orderlist as $k=>$order) {
  echo 'Id for position ' . $k . ' = ' . $order . '<br>';
}     
?>
Hugo Delsing
fuente
7

Este es mi ejemplo.

https://github.com/luisnicg/jQuery-Sortable-and-PHP

Necesita atrapar el pedido en el evento de actualización

    $( "#sortable" ).sortable({
    placeholder: "ui-state-highlight",
    update: function( event, ui ) {
        var sorted = $( "#sortable" ).sortable( "serialize", { key: "sort" } );
        $.post( "form/order.php",{ 'choices[]': sorted});
    }
});
luisnicg
fuente
0

Puedo cambiar las filas siguiendo la respuesta aceptada y el ejemplo asociado en jsFiddle. Pero debido a algunas razones desconocidas, no pude obtener los identificadores después de las acciones de "detener o cambiar". Pero el ejemplo publicado en la página de IU de JQuery funciona bien para mí. Puedes consultar ese enlace aquí.

Desarrollador web
fuente
0

Pruebe con esta solución: http://phppot.com/php/sorting-mysql-row-order-using-jquery/ donde se guarda un nuevo pedido en algún elemento HMTL. Luego envía el formulario con estos datos a algún script PHP e itera a través de él con el bucle for.

Nota: Tuve que agregar otro campo de base de datos de tipo INT (11) que se actualiza (con fecha y hora) en cada iteración; sirve para que el script sepa qué fila se actualizó recientemente, o de lo contrario terminará con resultados codificados.

TomoMiha
fuente