使用jQuery拖放表列的排序

Question

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

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

编辑:请注意,jQuery,Dojo等(免费的)实际上是JS框架的唯一选择.我无法获得像ExtJS这样商业化的许可证.

Answer 1

有一个叫做Dragtable的JQuery UI Widget .

现场演示

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

Answer 3

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

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