HTML拖放排序表

Question

曾经想有一个HTML拖放排序表中，你可以行和列进行排序？我知道这件事情我会死的。有很多排序列表绕来绕去，但找到的可分类表似乎是不可能找到的。

我知道，你可以得到相当接近与Script.aculo.us中提供的工具，但我遇到了与他们的一些跨浏览器的问题。

Answer 1

如果你不介意的Java，有一个GWT一个非常方便的库调用GWT-DND检查了在线演示，看看它是多么强大。

Answer 2

如何sorttable？这似乎很好地适应您的需求。

这是相当容易使用 - 加载的SortTable JavaScript文件，那么，你希望它让每个排序表，应用类=“排序”的<table>标签。

它会立即明白如何大多数类型的数据进行排序，但如果有什么东西没有，你可以添加自定义排序关键字来告诉它如何排序。文档解释这一切非常好。

Answer 3

如果您发现.serialize（）的大卫·赫吉的解决方案返回null然后设置ID值的红素为“ID_1”，而不是简单的“1”

例：

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

上述将序列为 “ID [] = 1＆ID [] = 2＆ID [] = 3”

您可以使用“=”， - 或“_”，而不是“_”“”。而除了“ID”任何其他的字。

Answer 4

我使用JQuery可排序这样做，但在情况下，你使用Vue.js我一样，这里是创建一个自定义的Vue指令封装可排序功能的解决方案，我知道Vue公司的拖动，但它不排序表的列每个问题HERE要看到这个动作，CHECK THIS

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

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