HTML拖放可排序表

Ever wanted to have an HTML drag and drop sortable table in which you could sort both rows and columns? I know it's something I'd die for. There's a lot of sortable lists going around but finding a sortable table seems to be impossible to find.

想要一个HTML拖放可排序表，在其中可以对行和列进行排序吗?我知道这是我为之献身的事业。有很多可排序的列表，但是要找到一个可排序的表似乎是不可能的。

I know that you can get pretty close with the tools that script.aculo.us provides but I ran into some cross-browser issues with them.

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

8 个解决方案

#1

I've used dhtmlxGrid in the past. Among other things it supports drag-and-drop rows/columns, client-side sorting (string, integer, date, custom) and multi-browser support.

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

Response to comment: No, not found anything better - just moved on from that project. :-)

回复:不，没有发现更好的东西——只是从那个项目开始。:-)

#2

I've used jQuery UI's sortable plugin with good results. Markup similar to this:

我使用了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>

and then in the javascript

然后在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
            }
        });
    }
});

This POSTs a serialized version of the items' IDs to the URL given. This function (PHP in my case) then updates the items' orders in the database.

它将项目id的序列化版本发布到给定的URL。这个函数(在我的例子中是PHP)然后更新数据库中的项目订单。

#3

I recommend Sortables in jQuery. You can use it on list items or pretty much anything, including tables.

我推荐jQuery的排序表。您可以在列表项或几乎任何东西上使用它，包括表。

jQuery is very cross-browser friendly and I recommend it all the time.

jQuery对跨浏览器非常友好，我一直推荐它。

#4

David Heggie's answer was the most useful to me. It can be slightly more concise:

大卫·赫吉的回答对我最有用。它可以更简洁一些:

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
});

works for me, with the same markup.

我用同样的标记。

#5

Most frameworks (Yui, MooTools, jQuery, Prototype/Scriptaculous, etc.) have sortable list functionality. Do a little research into each and pick the one that suits your needs most.

大多数框架(Yui、MooTools、jQuery、Prototype/Scriptaculous等)都具有可排序列表功能。多做一些调查，挑出最适合你需要的。

#6

If you don't mind Java, there is a very handy library for GWT called GWT-DND check out the online demo to see how powerful it is.

如果您不介意Java，有一个非常方便的GWT库叫做GWT- dnd，请查看在线演示，看看它有多强大。

#7

How about sorttable? That would seem to fit your requirements nicely.

sorttable怎么样?那似乎很符合你的要求。

It's rather easy to use - load the sorttable Javascript file, then, for each table you want it to make sortable, apply class="sortable" to the <table> tag.

这很容易使用——加载可排序的Javascript文件，然后，对于每个要排序的表，将class="sortable"应用到

标记上。

It will immediately understand how to sort most types of data, but if there's something it doesn't, you can add a custom sort key to tell it how to sort. The documentation explains it all pretty well.

它将立即了解如何对大多数类型的数据进行排序，但是如果有什么不知道的，您可以添加一个自定义排序键来告诉它如何排序。文档很好地解释了这一切。

#8

If you find .serialize() returning null in David Heggie's solution then set the id values for the TRs as 'id_1' instead of simply '1'

如果在David Heggie的解决方案中发现。serialize()返回null，那么将TRs的id值设置为'id_1'而不是'1'

Example:

例子:

<tr id="id_1"><td>1</td><td>Name1</td><td>Details1</td></tr>
<tr id="id_2"><td>2</td><td>Name1</td><td>Details2</td></tr>
<tr id="id_3"><td>3</td><td>Name1</td><td>Details3</td></tr>
<tr id="id_4"><td>4</td><td>Name1</td><td>Details4</td></tr>

The above will serialize as "id[]=1&id[]=2&id[]=3"

以上将被序列化为“id[]=1&id[]=2&id[]=3”

You can use '=', '-' or '_' instead of '_'. And any other word besides "id".

你可以用“=”、“-”或“_”代替“_”。还有除了"id"之外的其他词。

#1