HTML拖放可排序表

Question

曾经想要一个HTML拖放可排序表,您可以在其中对行和列进行排序吗？我知道这是我为之而死的东西.有很多可排序的列表,但找到一个可排序的表似乎是不可能找到的.

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

Answer 1

我使用了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的序列化版本POST到给定的URL.这个函数(在我的例子中是PHP)然后更新数据库中的项目顺序.

Answer 2

我推荐在jQuery中使用Sortables.您可以在列表项或几乎任何东西上使用它,包括表.

jQuery非常适合跨浏览器,我一直都在推荐它.

Answer 3

我过去使用过dhtmlxGrid 。除此之外，它还支持拖放行/列、客户端排序（字符串、整数、日期、自定义）和多浏览器支持。

对评论的回应：不，没有找到更好的东西 - 只是从那个项目继续前进。:-)