HTML trascinare e rilasciare ordinabile tavoli

Question

Mai desiderato di avere un HTML trascinare e rilasciare tabella ordinabile, in cui si poteva ordinare le righe e per colonne?So che è qualcosa che mi piacerebbe morire per.C'è un sacco di ordinabili liste di andare in giro, ma trovare una tabella ordinabile sembra essere impossibile da trovare.

So che è possibile ottenere abbastanza vicino gli strumenti di script.aculo.ci fornisce, ma mi sono imbattuto in alcuni cross-browser problemi con loro.

Answer 1

Ho usato dhtmlxGrid in passato.Tra le altre cose, supporta il drag-and-drop di righe/colonne, lato client ordinamento (stringa, intero, data, personalizzato) e multi-supporto del browser.

Risposta al commento:No, non ha trovato niente di meglio, appena trasferito da quel progetto.:-)

Answer 2

Ho usato jQuery UI sortable plugin con buoni risultati.Markup simile a questo:

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

e poi in 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
            }
        });
    }
});

Questo Post una versione serializzata di elementi' Id per l'URL.Questa funzione PHP (nel mio caso) quindi aggiorna gli " ordini nel database.

Answer 3

Mi raccomando Sortables in jQuery.Si può utilizzare su elementi di una lista o praticamente qualsiasi cosa, incluse le tabelle.

jQuery è molto cross-browser e cordiale lo consiglio per tutto il tempo.

Answer 4

David Heggie la risposta è stata la più utile per me.Può essere leggermente più 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
});

per me funziona, con lo stesso markup.

Answer 5

La maggior parte dei quadri (Yui, MooTools, jQuery, Prototype/Scriptaculous, etc.) sono ordinabili elenco di funzionalità.Fare una piccola ricerca in ogni e scegliere quello che si adatta alle vostre esigenze più.

Answer 6

Se non ti dispiace Java, c'è un pratico biblioteca per GWT chiamato GWT-DND controllare il demo online per vedere quanto è potente.

Answer 7

Come circa sorttable?Che sembrerebbe più adatto alle vostre esigenze bene.

E ' piuttosto facile da usare - caricare il sorttable file Javascript, quindi, per ogni tabella che si desidera fare ordinabile, applicare class="ordinabile" per il <table> tag.

Sarà immediatamente capire come ordinare la maggior parte dei tipi di dati, ma se c'è qualcosa che non va, è possibile aggiungere un ordinamento personalizzato chiave per indicare come ordinare.La documentazione spiega tutto abbastanza bene.

Answer 8

Se si trova .serialize() restituisce null in David Heggie la soluzione quindi impostare i valori di id per il TRs come 'id_1' invece di '1'

Esempio:

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

Quanto sopra è, come serializzare "id[]=1&id[]=2&id[]=3"

Si può usare '=', '-' o '_' invece di '_'.E qualsiasi altra parola oltre "id".

Answer 9

Sto usando JQuery Ordinabile a fare così, ma nel caso in cui si sta utilizzando Vue.js come me, qui è una soluzione che crea un custom Vue direttiva per incapsulare il Ordinabile funzionalità, sono consapevole di Vue trascinabile, ma non ordinare le colonne di tabella come per il problema QUI Per vedere in azione, CONTROLLARE QUESTO

Codice 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 Template 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]}}