php - drop - jQuery UI Clasificable, luego escribe orden en una base de datos

jquery sortable table

Question

Deseo utilizar la función de sortable jQuery UI para permitir a los usuarios establecer un pedido y luego cambiar, escribirlo en la base de datos y actualizarlo. ¿Alguien puede escribir un ejemplo sobre cómo se haría esto?

Answer 1

Estás de suerte, utilizo lo exacto en mi CMS

Cuando desee almacenar el pedido, simplemente llame al método de JavaScript saveOrder() . Hará una POST AJAX POST para saveorder.php, pero por supuesto siempre puedes publicarla 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é todas las verificaciones y comprobaciones.

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

Answer 2

Este es mi ejemplo.

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

Necesita capturar el orden 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});
    }
});

Answer 3

La función de sortable jQuery UI incluye un método de serialize para hacer esto. Es bastante simple, realmente. Aquí hay un ejemplo rápido que envía los datos a la URL especificada tan pronto como un elemento tiene una posición de cambio.

$(''#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 hace esto es que crea una matriz de elementos usando los elementos id . Entonces, generalmente hago algo como esto:

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

Cuando use la opción serialize , creará una cadena de consulta POST como esta: item[]=1&item[]=2 etc. Por lo tanto, si utiliza, por ejemplo, sus ID de base de datos en el atributo id , 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.

Answer 4

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 clasificación. (en lugar de enviar todos los elementos cada vez o iterar a través de muchos elementos que el servidor podría descartar) B) Necesitaba devolver una 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 devolverán 2 valores: la id db del elemento ordenado y la id db del elemento al lado del cual se eliminó. En función de 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>

Answer 5

Pruebe con esta solución: http://phppot.com/php/sorting-mysql-row-order-using-jquery/ donde se guarda el nuevo pedido en algún elemento HMTL. A continuación, envíe el formulario con estos datos a algunos scripts de PHP e itere a través de él con for loop.

Nota: Tuve que agregar otro campo db de tipo INT (11) que se actualiza (marca de tiempo) en cada iteración; sirve para que el script sepa qué fila se actualizó recientemente, o bien termina con resultados codificados.

Answer 6

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