我使用jQuery來驅動我的AJAX UI。我有一個數據表，我想讓用戶通過拖放來重新排列表中的列。我希望用戶能夠抓取列的標題並移動它。下面的數據行應該遵循。請注意，我對而不是有興趣對數據進行排序或重新排序行，但允許用戶更改列的順序。使用jQuery拖放表列的排序
有沒有現有的解決方案？我嘗試在<th>元素上使用標準的jQuery排序調用，但當然不起作用。我瀏覽了jQuery插件網站並沒有找到任何東西。我需要寫一個jQuery插件嗎？
編輯：請注意，jQuery，Dojo等（免費版）實際上是JS框架的唯一選項。我無法獲得像ExtJS這樣的商業許可證。
如果您願意支付許可證，您可以嘗試使用Ext JS而不僅僅是jQuery。有一些非常強大的網格功能，包括你想要做的事情。
http://www.extjs.com/deploy/dev/examples/grid/array-grid.html
不幸的是，我無法將我工作的委員會討論進去。他們有點緊張。不過謝謝 - 這正是我正在尋找的。 – 2009-11-10 05:02:31
可排序的jQuery UI庫似乎正是你想要做的。
https://github.com/dbrink/sorttable/wiki http://plugins.jquery.com/project/sorttable
這裏是另外一個建立在jQuery的UI庫的頂部http://akottr.github.io/dragtable/
試試這個：
$('.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>
做任何你行的跨越多於一列？ – 2009-11-10 03:58:16
不是。這是非常直接的標記。我可以發佈它，但我不認爲這太令人吃驚。 – 2009-11-10 05:03:36