使用jQuery拖放表列的排序

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

有现成的解决方案吗? 我尝试在

元素上使用标准的jQuery可排序调用,但当然这不起作用。 我浏览了jQuery插件网站并没有找到任何东西。 我需要编写一个jQuery插件吗?

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

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

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

有一个叫做Dragtable的JQuery UI Widget。

现场演示

试试这个:

 $('.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. } }); } }); 
    
abc xyz
Text Here Yes, you are done
Foo Bar

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

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

这是另一个建立在jquery-ui库之上的http://akottr.github.io/dragtable/

你应该尝试Danvk的Dragtable

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

除此之外它太棒了。

你的意思是这样的? 表拖放JQuery插件