5

Código de la view:

<div id="tabs">
        <div class="col-md-12" id="current">
            @include('cms.public.views.partials._messages')         
            <div id="table1">
              <table class="table">
                <thead style="color:white">
                  <tr>
                    <th><a href="{{route('admin.projects.order', ['field' => 'id','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByIdAsc"></span></a>ID<a href="{{route('admin.projects.order', ['field' => 'id','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByIdDesc"></span></a></th>
                    <th><a href="{{route('admin.projects.order', ['field' => 'slug','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderBySlugAsc"></span></a>SLUG<a href="{{route('admin.projects.order',['field' => 'slug','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderBySlugDown"></span></a></th>
                    <th><a href="{{route('admin.projects.order', ['field' => 'order','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByOrderAsc"></span></a>ORDER<a href="{{route('admin.projects.order', ['field' => 'order','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByOrderDesc"></span></a></th>
                    <th><a href="{{route('admin.projects.order', ['field' => 'public','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByPublicAsc"></span></a>PUBLIC<a href="{{route('admin.projects.order', ['field' => 'public','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByPublicDesc"></span></a></th>
                    <th><span class="glyphicon glyphicon-cog"></span></th>
                  </tr>
                </thead>
                <tbody style="color:white">
                  @foreach ($projects as $key => $project)
                    <tr>
                      <td>{{$project->id}}</td>
                      <td>{{$project->slug}}</td>
                      <td>{{$project->order}}</td>
                      <td>{{$project->public}}</td>
                      <td><a href="{{ route('admin.projects.show', $project->id)}}" class="btn btn-info btn-sm">View</a> <a href="{{ route('admin.project.edit', $project->id)}}" class="btn btn-success btn-sm">Edit</a></td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
              <br><br>
            </div>
        </div>
</div>

Código Jquery:

$("#tabs").tabs();

$("tbody").sortable({
    items: "> tr",
    appendTo: "parent",
    helper: "clone"
}).disableSelection();

$("#tabs ul li a").droppable({
    hoverClass: "drophover",
    tolerance: "pointer",
    drop: function(e, ui) {
        var tabdiv = $(this).attr("href");
        $(tabdiv + " table tr:last").after("<tr>" + ui.draggable.html() + "</tr>");
        ui.draggable.remove();
    }
});

Alguien me podría poner algún ejemplo de como actualizar automaticamente los datos de la base de datos, al mover alguna fila?

Actualización

Voy a ser bastante más detallado para que me entendáis mejor y me podáis ayudar.

La vista se ve ordenada por el campo 'order', es decir los datos se muestran asi:

id - pepito- 29 - public

id - slug - 28 - public

id - slug - 27 - public

id - slug - 26 - public

id - slug - 25 - public

id - slug - 24 - public
y así hasta el

id - ultimopepito- 1 - public

Si yo arrastro por ejemplo, el que tiene el campo 'order' = a 1 arriba del todo la vista se ve así:

id - ultimopepito- 1 - public

id - pepito- 29 - public, etc.

La idea seria que se actualizaran los datos al hacer el 'drop' y se viera así:

id - ultimopepito - 29 - public

id - pepito - 28 - public

Para esto, al hacer el 'drop' se tiene que actualizar automaticamente los datos.

Creo que así se podría hacer: Coger el order del drag y coger el order del drop. Si el movimiento es para arriba le restaria uno a los que quedaran por debajo del drop y viceversa, el problema es que no tengo los conocimientos para hacer esto.

3
  • no estaria entendiendo que es lo que quieres actualizar al mover filas.. moverlas no genera ningun impacto en la base de datos.. que datos van a cambiar en la base de datos?
    – gbianchi
    el 23 ago. 2017 a las 15:54
  • ¿Básicamente deseas cambiar el atributo orden de todos los registros (o de los registros implicados) al mover alguno de estos?
    – Shaz
    el 24 ago. 2017 a las 14:15
  • Al hacer el drag and drop realmente estas desplazando un registro, dependiendo de si lo mueves hacia arriba o hacia abajo, habrán x registros afectados, entonces la idea sería al hacer el drop, revisar todos los registros y actualizarlos con el nuevo orden automaticamente. @Shaz el 24 ago. 2017 a las 18:04

2 respuestas 2

3
+50

Hay varias formas de hacerlo, la más fácil sería con sortable de jQuery UI, utilizando su método update(), pero deberás incluir preferiblemente el id en los atributos html, algo así:

              @foreach ($projects as $key => $project)
                <tr id="{{$project->id}}">
                  <td>{{$project->id}}</td>
                  <td>{{$project->slug}}</td>
                  <td>{{$project->order}}</td>
                  <td>{{$project->public}}</td>
                  <td><a href="{{ route('admin.projects.show', $project->id)}}" class="btn btn-info btn-sm">View</a> <a href="{{ route('admin.project.edit', $project->id)}}" class="btn btn-success btn-sm">Edit</a></td>
                </tr>
              @endforeach

Luego haces el envío por ajax del orden de los id:

$("tbody").sortable({
    items: "> tr",
    appendTo: "parent",
    helper: "clone",
    update: function( event, ui ) {
        let newOrder = $(this).sortable('toArray');
        $.ajax({
            method: "POST",
            url: {{ route('updateOrder') }},
            data: {ids: newOrder}
        })
       .done(function( msg ) {
            // render table with new order?
       });
    }
}).disableSelection();

Y en el controlador organizas el query que vas a enviar para actualizar todos los id en la base de datos:

// en el array ids, los "keys" serían el orden, los cuales puedes modificar según lo que requieras
$ids = $request->ids;

// invertimos el orden de los ids, para que sea descendente
$ids = array_reverse($ids);

$caseQuery = 'CASE id ';
foreach ($ids as $order => $id) {
    $caseQuery .= "WHEN $id THEN $order ";
}
$caseQuery .= ' END';

DB::table('projects')
        ->whereIn('id', $ids)
        ->update(['order' => $caseQuery]);

EDICIÓN

Laravel tiene una limitación en el método update que no nos permite utilizar el string que incluye CASE ... END, esto debido a que Laravel espera un parámetro (entero) que luego reemplazará al momento de hacer el bind en PDO.

Para poder resolver el problema vamos a utilizar el mismo método update() pero vamos a pasar el query como "raw" y anexamos todos sus parámetros de forma manual para que PDO se encargue:

$queryParams = [];

// el query será definido en su totalidad de forma manual
$query = 'UPDATE projects SET ordering = CASE id ';

// agregamos cada parámetro de orden y de id al array para respetar las convenciones de PDO
foreach ($ids as $order => $id) {
    $query .= 'WHEN ? THEN ? ';
    $queryParams[] = (int) $id;
    $queryParams[] = (int) $order;
}

// por último agregamos los ids implicados en el update
$queryParams = array_merge($queryParams, $ids);

// generamos los ? necesarios para el array de ids en el query PDO
$whereInArray = array_fill(0, count($ids), '?');
$whereInString = implode(", ", $whereInArray);

// agregamos dicho string generado al query final
$query .= "END WHERE id IN ($whereInString)";

// realizamos el update
DB::update($query, $queryParams);

Otro método sería actualizar cada registro, pero podría ser levemente más lento por tantas solicitudes a la base de datos, para lo cual utilizarías una transaction: https://laravel.com/docs/5.4/database#database-transactions

15
  • Muchísimas gracias compañero, ahora mismo me pongo al lío y intento sacarlo. Te iré comentando, muchas gracias de nuevo. el 28 ago. 2017 a las 7:02
  • Hola de nuevo @Shaz, me da un error al hacer el 'drop': Type error: Too few arguments to function App\Http\Controllers\AdminController::updateOrder(), 0 passed and exactly 1 expected la información que pasa es: 25,23,19,27,26,18,28,14,24,20,12,13,17,29,15,21,16,22,4,3,1,6,9,8,5,2,10,11,7: . Te he editado la pregunta para que veas como tengo el código actualmente. el 28 ago. 2017 a las 7:57
  • Lo he vuelto a actualizar. el 28 ago. 2017 a las 8:11
  • Te voy a ir poniendo lo que voy probando aquí, por si te puede ser de ayuda. Al pasar Request $request en la función del controlador, pongo un return $ids después de la linea de $ids = $request->ids y no me devuelve nada. el 28 ago. 2017 a las 8:19
  • El valor de $ids en la función es null el 28 ago. 2017 a las 10:12
0

Tenés que capturar el nuevo orden de los elementos y enviarlos a la base de datos, puede ser mediante ajax.

 $(function() {
    $('#sortable-8').sortable({
       update: function(event, ui) {
          var productOrder = $(this).sortable('toArray').toString();
          $("#sortable-9").text (productOrder);
       }
    });
 });

update(event, ui): This event is triggered when a sort operation stops and the position of the item has been changed.

Te dejo un link donde explica muy bien todo con ejemplos https://www.tutorialspoint.com/jqueryui/jqueryui_sortable.htm

1
  • Gracias por el comentario compañero, creo que me puede ser de ayuda. En cuanto tenga un tiempo me lo mirare mas a fondo, sería de ayuda si editas la respuesta y pones los ids que tengo yo en la pregunta para que este mas claro. el 26 ago. 2017 a las 17:23

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.