使用 jQuery 对表格列进行拖放排序答案

【问题标题】：Drag and drop sorting of table columns with jQuery使用 jQuery 对表格列进行拖放排序
【发布时间】：2009-11-10 03:53:15
【问题描述】：

我正在使用 jQuery 来驱动我的 AJAX UI。我有一个数据表，我想允许用户通过拖放来重新排序表中的列。我希望用户能够抓取列的标题并移动它。下面的数据行应该跟在后面。请注意，我不对数据排序或对行重新排序感兴趣，但对允许用户更改列的顺序感兴趣。

有现成的解决方案吗？我尝试在<th> 元素上使用标准的jQuery 可排序调用，但这当然不起作用。我浏览了 jQuery 插件站点并没有找到任何东西。我需要写一个 jQuery 插件吗？

编辑：请注意，jQuery、Dojo 等（免费的）确实是 JS 框架的唯一选择。我无法获得像 ExtJS 这样的商业广告的许可证。

【问题讨论】：

您的任何行是否跨越多列？
没有。这是非常直接的标记。我可以发布它，但我认为这不会太令人惊讶。

标签： jquery jquery-ui sorting drag-and-drop

【解决方案1】：

有一个名为 Dragtable 的 JQuery UI 小部件。

Live demo

【讨论】：

【解决方案2】：

试试这个：

$('.sort').sortable({
  cursor: 'move',
  axis: 'y',
  update: function(e, ui) {
    $(this).sortable('refresh');
    var params = {};
    params = $('.id').serializeArray(),
      $.ajax({
        type: 'POST',
        data: {
          id : params
        },
        url: 'Your url',
        success: function(msg) {
          // Your sorted data.
        }
      });
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>abc</th>
      <th>xyz</th>
    </tr>
  </thead>
  <tbody class="sort">
    <tr>
      <input class="id" name="id" type="hidden" value="Your Value" />
      <td class="center"><span>Text Here</span></td>
      <td>Yes, you are done</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案3】：

可排序的 jquery UI 库似乎完全符合您的要求。

https://github.com/dbrink/sorttable/wiki http://plugins.jquery.com/project/sorttable

【讨论】：

请注意，这与 Jquery UI Sortable 不同（注意 sorttable 中多余的 T）。
好点。它是 a 可排序表，支持碰巧使用 jQuery 所描述的功能。至于质量，YMMV因为我没用过，只是碰巧注意到了。

【解决方案4】：

这是另一个基于 jquery-ui 库 http://akottr.github.io/dragtable/ 构建的工具

【讨论】：

【解决方案5】：

你应该试试Dragtable by Danvk

不过，我在寻找修复它的错误时发现了这个问题。它不喜欢放置在水平滚动面板中的表格。

除此之外，它太棒了。

【讨论】：

【解决方案6】：

如果您愿意为许可证付费，您可以尝试使用 Ext JS 而不仅仅是 jQuery。有一些非常强大的网格功能，包括您正在尝试做的事情。

http://www.extjs.com/deploy/dev/examples/grid/array-grid.html

【讨论】：

遗憾的是，我无法说服我所在的委员会参与其中。他们有点吝啬。不过，谢谢 - 这正是我想要的。

【解决方案7】：

你的意思是这样的吗？ Table Drag and Drop JQuery plugin

【讨论】：

处理 rows 的重新排列，并且 OP 特别声明这不是他想要的。