Question

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

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

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

Answer 1

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

Live demo

Answer 2

请改为尝试：

＆＃13;

<!-- our global achievers carousel -->
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12">
            <div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic2" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic2" data-slide-to="2"></li>
      </ol>

  <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active" id="ac1_div">

        </div>
        <div class="item">
          <img src="../images/banner_carousel_b.jpg" alt="...">

        </div>
         <div class="item">
          <img src="../images/banner_carousel_c.jpg" alt="...">

        </div>

      </div>

  <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
</div>

            </div>
        </div>

/*my css code*/

    #ac1_div
        {
            content: url("../pages/achievers/ac1.html");
            }
<!--ac1.html-->
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<h1>achiever</h1>
</body>
</html>

＆＃13;

$('.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.
        }
      });
  }
});

＆＃13;

Answer 3

Sorttable jquery UI库似乎完全符合您的要求。

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

Answer 4

这是另一个构建在jquery-ui库http://akottr.github.io/dragtable/

之上的文件

Answer 5

您应该尝试Dragtable by Danvk

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

除此之外，这太棒了。

Answer 6

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

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

Answer 7

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

使用jQuery拖放表列的排序

7 个答案: