是否曾经想过有一个HTML拖放式可排序表，可以在其中对行和列进行排序？我知道这是我会死的。周围有很多可排序的列表，但是似乎找不到可排序的表。

我知道我们可以非常接近script.aculo.us提供的工具，但是我遇到了一些跨浏览器的问题。

解决方案

回答

排序表怎么样？这似乎很好地满足了要求。

加载排序表Javascript文件非常容易，然后，对于要使其可排序的每个表，将class =" sortable"应用于<table>标记。

它会立即了解如何对大多数类型的数据进行排序，但是如果没有，我们可以添加一个自定义的排序键来告诉它如何进行排序。该文档很好地解释了这一切。

回答

我建议在jQuery中使用Sortables。我们可以在列表项或者几乎所有内容(包括表格)上使用它。

jQuery非常适合跨浏览器使用，我一直建议这样做。

回答

如果我们不介意Java，则有一个非常方便的GWT库，称为GWT-DND，请查看在线演示以了解它的功能。

回答

我过去曾经使用过dhtmlxGrid。除其他功能外，它还支持拖放行/列，客户端排序(字符串，整数，日期，自定义)和多浏览器支持。

对评论的回应：
不，没有发现任何更好的东西，只是从该项目继续进行。 :-)

回答

大多数框架(Yui，MooTools，jQuery，Prototype / Scriptaculous等)都具有可排序的列表功能。对每一项进行一点研究，然后选择最适合需求。

回答

我使用了jQuery UI的sortable插件，效果很好。标记与此类似：

<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)更新数据库中商品的订单。

回答

David Heggie的回答对我最有用。可以更简洁一些：

var sort = function(event, ui) {
  var url = "/myReorderFunctionURL/" + $(this).sortable('serialize');
  $.post(url, null,null,"script");  // sortable("refresh") is automatic
}

$(".sort").sortable({
  cursor: 'move',
  axis: 'y',
  stop: sort
});

为我工作，具有相同的标记。