HTML glisser-déposer des tables triables

Question

Avez-vous déjà voulu avoir un tableau HTML triable par glisser-déposer dans lequel vous pouvez trier les lignes et les colonnes? Je sais que c'est une chose pour laquelle je mourrais. Il y a beaucoup de listes triables qui circulent, mais il semble impossible de trouver un tableau triable.

Je sais que vous pouvez vous rapprocher des outils fournis par script.aculo.us, mais j’ai rencontré quelques problèmes concernant plusieurs navigateurs.

Answer 1

J'ai déjà utilisé dhtmlxGrid . Il prend en charge, entre autres, les lignes / colonnes par glisser-déposer, le tri côté client (chaîne, entier, date, personnalisé) et le multi-navigateur.

Réponse au commentaire: Non, je n'ai rien trouvé de mieux - je viens de passer de ce projet. : -)

Answer 2

J'ai utilisé le plugin triable de jQuery UI avec de bons résultats. Balisage semblable à ceci:

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

puis dans le 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
            }
        });
    }
});

Ceci poste une version sérialisée des identifiants des éléments à l'URL indiquée. Cette fonction (PHP dans mon cas) met ensuite à jour les commandes des articles dans la base de données.

Answer 3

Je recommande Sortables de jQuery . Vous pouvez l'utiliser sur des éléments de liste ou à peu près n'importe quoi, y compris les tableaux.

jQuery est très convivial pour tous les navigateurs et je le recommande tout le temps.

Answer 4

La réponse de David Heggie m'a été la plus utile. Cela peut être un peu plus concis:

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
});

travaille pour moi, avec le même balisage.

Answer 5

La plupart des frameworks (Yui, MooTools, jQuery, Prototype / Scriptaculous, etc.) ont une fonctionnalité de liste triable. Faites une petite recherche sur chacun d’entre eux et choisissez celui qui vous convient le mieux.

Answer 6

Si cela ne vous dérange pas, il existe une bibliothèque très pratique pour GWT appelée GWT. -DND consultez la démo en ligne pour voir sa puissance.

Answer 7

Que diriez-vous de la table de tri ? Cela semblerait bien répondre à vos besoins.

C'est assez facile à utiliser - chargez le fichier Javascript de la table de tri, puis, pour chaque table que vous voulez rendre triable, appliquez class = & "triable &"; à la < table > tag.

Il comprendra immédiatement comment trier la plupart des types de données, mais s’il existe quelque chose qui n’y correspond pas, vous pouvez ajouter une clé de tri personnalisée pour lui indiquer comment trier. La documentation explique très bien tout cela.

Answer 8

Si vous trouvez que .serialize () renvoie null dans la solution de David Heggie, définissez les valeurs d'ID des TR comme "id_1" au lieu de "1"

Exemple:

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

Ce qui précède sera sérialisé sous la forme " id [] = 1 & amp; id [] = 2 & amp; id [] = 3 "

Vous pouvez utiliser '=', '-' ou '_' au lieu de '_'. Et tout autre mot que & "; Id &";.

.

Answer 9

J'utilise JQuery Sortable pour le faire, mais au cas où vous utiliseriez Vue.js comme moi, voici une solution qui crée une directive Vue personnalisée pour encapsuler la fonctionnalité Sortable, je suis conscient du fait que Vue traînable ne se trie pas. colonnes de table selon le numéro ICI Pour le voir en action, VÉRIFIEZ CECI

Code 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;
}

HTML de modèle de Pug

#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]}}