Question

曾经想要一个HTML拖放可排序表，您可以在其中对行和列进行排序吗？我知道这是我为之而死的东西。有很多可排序的列表，但找到一个可排序的表似乎是不可能找到的。

我知道你可以与script.aculo.us提供的工具非常接近，但我遇到了一些跨浏览器的问题。

Answer 1

我使用了jQuery UI的可排序插件，效果很好。标记类似于：

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

然后在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
            }
        });
    }
});

将项目ID的序列化版本POST到给定的URL。这个函数（在我的例子中是PHP）然后更新数据库中的项目订单。

Answer 2

我在Sortables中推荐jQuery。您可以在列表项或几乎任何东西上使用它，包括表格。

jQuery非常适合跨浏览器，我一直都在推荐它。

Answer 3

我过去曾使用dhtmlxGrid。除此之外，它还支持拖放行/列，客户端排序（字符串，整数，日期，自定义）和多浏览器支持。

对评论的回应：不，没有找到更好的东西 - 只是从那个项目开始。： - ）

Answer 4

David Heggie的回答对我来说最有用。它可以稍微简洁一点：

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

适用于我，使用相同的标记。

Answer 5

大多数框架（Yui，MooTools，jQuery，Prototype / Scriptaculous等）都具有可排序列表功能。对每个进行一些研究，然后选择最适合您需求的那个。

Answer 6

sorttable怎么样？这似乎很符合你的要求。

它很容易使用 - 加载可排序的Javascript文件，然后，对于您希望它进行排序的每个表，将class =“sortable”应用于＆lt; table＆gt;标签

它将立即了解如何对大多数类型的数据进行排序，但如果它没有，则可以添加自定义排序键以告诉它如何排序。文档很好地解释了这一点。

Answer 7

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

Answer 8

如果你发现.serialize（）在David Heggie的解决方案中返回null，那么将TR的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＆amp; id [] = 2＆amp; id [] = 3”

您可以使用'='，' - '或'_'代替'_'。除了“id”之外的任何其他词。

Answer 9

我正在使用JQuery Sortable这样做，但是如果您像我一样使用Vue.js，这是一个创建自定义Vue指令以封装Sortable功能的解决方案，我知道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]}}

HTML拖放可排序表

9 个答案: