是否曾经想要一个 HTML 拖放式可排序表格,您可以在其中对行和列进行排序?我知道这是我愿意为之而死的东西。有很多可排序的列表,但似乎找不到可排序的表。
我知道您可以非常接近 script.aculo.us 提供的工具,但我遇到了一些跨浏览器问题。
最佳答案
我使用了 jQuery UI 的可排序插件并取得了不错的效果。与此类似的标记:
<table id="myTable">
<thead>
<tr><th>ID</th><th>Name</th><th>Details</th></tr>
</thead>
<tbody class="sort">
<tr id="1"><td>1</td><td>Name1</td><td>Details1</td></tr>
<tr id="2"><td>2</td><td>Name1</td><td>Details2</td></tr>
<tr id="3"><td>3</td><td>Name1</td><td>Details3</td></tr>
<tr id="4"><td>4</td><td>Name1</td><td>Details4</td></tr>
</tbody>
</table>
然后在 javascript 中
$('.sort').sortable({
cursor: 'move',
axis: 'y',
update: function(e, ui) {
href = '/myReorderFunctionURL/';
$(this).sortable("refresh");
sorted = $(this).sortable("serialize", 'id');
$.ajax({
type: 'POST',
url: href,
data: sorted,
success: function(msg) {
//do something with the sorted data
}
});
}
});
这会将项目 ID 的序列化版本发布到给定的 URL。这个函数(在我的例子中是 PHP)然后更新数据库中的项目订单。
关于javascript - HTML 拖放可排序表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/82259/