使用 jQuery 对表列进行拖放排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1705525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drag and drop sorting of table columns with jQuery
提问by A. Morrow
I'm using jQuery to drive my AJAX UI. I have a table of data, and I want to allow the user to reorder the columns in the table by dragging and dropping them. I'd like the user to be able to grab the header for a column and move it. The row of data underneath should follow. Note that I'm notinterested in sorting the data or in reordering rows, but in allowing the user to change the order of the columns.
我正在使用 jQuery 来驱动我的 AJAX UI。我有一个数据表，我希望允许用户通过拖放它们来重新排序表中的列。我希望用户能够抓取列的标题并移动它。下面的数据行应该跟在后面。请注意，我对排序数据或重新排序行不感兴趣，但对允许用户更改列的顺序不感兴趣。
Is there an existing solution? I tried using the standard jQuery sortable call on the <th>elements, but of course that doesn't work. I browsed through the jQuery plugins site and didn't find anything. Will I need to write a jQuery plugin?
是否有现有的解决方案？我尝试对<th>元素使用标准的 jQuery 可排序调用，但这当然行不通。我浏览了 jQuery 插件站点并没有找到任何东西。我需要编写一个 jQuery 插件吗？
Edit: Note that jQuery, Dojo, etc. (the free ones) are really the only option for a JS framework. I can't get a license for anything commercial like ExtJS.
编辑：请注意，jQuery、Dojo 等（免费的）实际上是 JS 框架的唯一选择。我无法获得 ExtJS 之类的任何商业许可证。
采纳答案by Brian Duncan
If you are willing to pay for a license you might try Ext JS instead of just jQuery. There are some pretty powerful grid features that include what you are trying to do.
如果您愿意为许可证付费，您可以尝试使用 Ext JS 而不是 jQuery。有一些非常强大的网格功能，包括您正在尝试做的事情。
http://www.extjs.com/deploy/dev/examples/grid/array-grid.html
http://www.extjs.com/deploy/dev/examples/grid/array-grid.html
回答by Christoph
回答by Vatsal M
Try this instead:
试试这个：
$('.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>回答by aradil
Sorttable jquery UI library appears to do exactly what you want here.
Sorttable jquery UI 库似乎完全符合您的要求。
https://github.com/dbrink/sorttable/wikihttp://plugins.jquery.com/project/sorttable
https://github.com/dbrink/sorttable/wikihttp://plugins.jquery.com/project/sorttable
回答by user1483285
Here is another one that builds on top of the jquery-ui library http://akottr.github.io/dragtable/
这是另一个建立在 jquery-ui 库之上的http://akottr.github.io/dragtable/
回答by Damo
You should try Dragtable by Danvk
你应该试试Danvk 的 Dragtable
I found this question while searching for a fix to a bug in it though. It doesn't like tables positioned in horizontally scrolling panels.
我在寻找修复其中的错误时发现了这个问题。它不喜欢水平滚动面板中的表格。
Aside from this it's fantastic.
除此之外，它太棒了。
回答by me_an
you mean something like this? Table Drag and Drop JQuery plugin
你的意思是这样的？表格拖放 JQuery 插件
