HTML arrastrar y soltar se pueden ordenar las tablas

Question

Alguna vez has querido tener un HTML de arrastrar y soltar se puede ordenar la tabla en la que puede ordenar filas y columnas?Sé que es algo que me gustaría morir.Hay un montón de ordenar las listas de ir a su alrededor, pero encontrar una tabla ordenable parece ser imposible de encontrar.

Yo sé que usted puede conseguir bastante de cerca con las herramientas de secuencia de comandos.aculo.nos ofrece, pero me encontré con algunos cross-browser problemas con ellos.

Answer 1

He usado dhtmlxGrid en el pasado.Entre otras cosas, soporta arrastrar y soltar las filas/columnas, en el lado cliente de clasificación (string, integer, date, personalizado) y multi-navegador de apoyo.

Respuesta a comentario:No, no encontró nada mejor - se acaba de mudar de ese proyecto.:-)

Answer 2

He usado jQuery UI sortable plugin con buenos resultados.De marcado similar a este:

<table id="myTable">
<thead>
<tr><th>ID</th><th>Name</th><th>Details</th></tr>
</thead>
<tbody class="sort">
<tr id="1"><td>1</td><td>Name1</td><td>Details1</td></tr>
<tr id="2"><td>2</td><td>Name1</td><td>Details2</td></tr>
<tr id="3"><td>3</td><td>Name1</td><td>Details3</td></tr>
<tr id="4"><td>4</td><td>Name1</td><td>Details4</td></tr>
</tbody>
</table>

y, a continuación, en el javascript

$('.sort').sortable({
    cursor: 'move',
    axis:   'y',
    update: function(e, ui) {
        href = '/myReorderFunctionURL/';
        $(this).sortable("refresh");
        sorted = $(this).sortable("serialize", 'id');
        $.ajax({
            type:   'POST',
            url:    href,
            data:   sorted,
            success: function(msg) {
                //do something with the sorted data
            }
        });
    }
});

En este POSTs una versión serializada de los elementos Identificadores de la URL.Esta función (PHP, en mi caso), a continuación, las actualizaciones de los artículos pedidos en la base de datos.

Answer 3

Recomiendo Sortables en jQuery.Se puede utilizar en los elementos de la lista o casi cualquier cosa, incluyendo las tablas.

jQuery es muy cross-browser amable y se los recomiendo todo el tiempo.

Answer 4

David Heggie, fue la respuesta de los más útiles para mí.Puede ser un poco más conciso:

var sort = function(event, ui) {
  var url = "/myReorderFunctionURL/" + $(this).sortable('serialize');
  $.post(url, null,null,"script");  // sortable("refresh") is automatic
}

$(".sort").sortable({
  cursor: 'move',
  axis: 'y',
  stop: sort
});

a mí me funciona, con el mismo margen de utilidad.

Answer 5

La mayoría de los marcos (Yui, MooTools, jQuery, Prototype/Scriptaculous, etc.) haber que se puede ordenar la lista de funcionalidad.Hacer un poco de investigación en cada uno y elegir el que se adapte a sus necesidades de la mayoría.

Answer 6

Si no te importa Java, no es una aplicación muy útil de la biblioteca para GWT llamado GWT-NO MOLESTAR echa un vistazo a la demo online para ver lo poderoso que es.

Answer 7

¿ sorttable?Que parece que se adapten a sus necesidades muy bien.

Es bastante fácil de usar - la carga de la sorttable archivo Javascript, entonces, para cada tabla que desea hacer ordenable, aplicar class="ordenar" a la <table> de la etiqueta.

De inmediato va a entender cómo ordenar la mayoría de los tipos de datos, pero si hay algo que no lo hace, usted puede agregar una ordenación personalizada clave para saber cómo ordenar.La documentación que se explica todo bastante bien.

Answer 8

Si usted encuentra .serialize() devuelve null en David Heggie la solución, a continuación, establezca los valores de id para el pdi como 'id_1' en lugar de simplemente '1'

Ejemplo:

<tr id="id_1"><td>1</td><td>Name1</td><td>Details1</td></tr>
<tr id="id_2"><td>2</td><td>Name1</td><td>Details2</td></tr>
<tr id="id_3"><td>3</td><td>Name1</td><td>Details3</td></tr>
<tr id="id_4"><td>4</td><td>Name1</td><td>Details4</td></tr>

El de arriba va a serializar como "id[]=1&id[]=2&id[]=3"

Puede usar '=', '-' o '_' en lugar de '_'.Y cualquier otra palabra además de "id".

Answer 9

Estoy usando JQuery que se puede Ordenar a hacerlo, pero en caso de que usted está usando Vue.js como yo, aquí es una solución que se crea un custom Vue directiva para encapsular el que se puede Ordenar la funcionalidad, soy consciente de Vue arrastrarse, pero no ordenar las columnas de la tabla como por el tema AQUÍ Para ver esto en acción, MARQUE ESTA

El Código JS

Vue.directive("draggable", {
  //adapted from https://codepen.io/kminek/pen/pEdmoo
  inserted: function(el, binding, a) {
    Sortable.create(el, {
      draggable: ".draggable",
      onEnd: function(e) {
        /* vnode.context is the context vue instance: "This is not documented as it's not encouraged to manipulate the vm from directives in Vue 2.0 - instead, directives should be used for low-level DOM manipulation, and higher-level stuff should be solved with components instead. But you can do this if some usecase needs this. */
        // fixme: can this be reworked to use a component?
        // https://github.com/vuejs/vue/issues/4065
        // https://forum.vuejs.org/t/how-can-i-access-the-vm-from-a-custom-directive-in-2-0/2548/3
        // https://github.com/vuejs/vue/issues/2873 "directive interface change"
        // `binding.expression` should be the name of your array from vm.data
        // set the expression like v-draggable="items"

        var clonedItems = a.context[binding.expression].filter(function(item) {
          return item;
        });
        clonedItems.splice(e.newIndex, 0, clonedItems.splice(e.oldIndex, 1)[0]);
        a.context[binding.expression] = [];
        Vue.nextTick(function() {
          a.context[binding.expression] = clonedItems;
        });

      }
    });
  }
});

const cols = [
  {name: "One", id: "one", canMove: false},
  {name: "Two", id: "two", canMove: true},
  {name: "Three", id: "three", canMove: true},
  {name: "Four", id: "four", canMove: true},
]

const rows = [
  {one: "Hi there", two: "I am so excited to test", three: "this column that actually drags and replaces", four: "another column in its place only if both can move"},
  {one: "Hi", two: "I", three: "am", four: "two"},
  {one: "Hi", two: "I", three: "am", four: "three"},
  {one: "Hi", two: "I", three: "am", four: "four"},
  {one: "Hi", two: "I", three: "am", four: "five"},
  {one: "Hi", two: "I", three: "am", four: "six"},
  {one: "Hi", two: "I", three: "am", four: "seven"}
]

Vue.component("datatable", {
  template: "#datatable",
  data() {
    return {
      cols: cols,
      rows: rows
    }
  }
})

new Vue({
  el: "#app"
})

CSS

.draggable {
  cursor: move;
}

table.table tbody td {
  white-space: nowrap;
}

Pug Plantilla HTML

#app
  datatable

script(type="text/x-template" id="datatable")
  table.table
    thead(v-draggable="cols")
      template(v-for="c in cols")
        th(:class="{draggable: c.canMove}")
          b-dropdown#ddown1.m-md-2(:text='c.name')
            b-dropdown-item First Action
            b-dropdown-item Second Action
            b-dropdown-item Third Action
            b-dropdown-divider
            b-dropdown-item Something else here...
            b-dropdown-item(disabled='') Disabled action

    tbody
      template(v-for="row in rows")
        tr
          template(v-for="(col, index) in cols")
            td {{row[col.id]}}