如何实现执行AJAX HTTP请求的jQueryUI可排序列表？

I am using Ruby on Rails 3.1.1 and jQueryUI 1.8.14. I would like to implement a jQueryUI sortable list and to save related item position changes in my application database. To implement\make that I am planning to perform an AJAX HTTP request (of course, including proper information\data in order to correctly make that effective\easy as well as possible) each time an user changes an item position.

我正在使用Ruby on Rails 3.1.1和jQueryUI 1.8.14。我想实现一个jQueryUI可排序列表，并在我的应用程序数据库中保存相关的项目位置更改。为了实现\ make我计划每次用户更改项目位置时执行AJAX HTTP请求（当然，包括正确的信息\数据以便正确地使这个有效\尽可能简单）。

How to perform an AJAX HTTP request when the item order changes? What data do you advice to consider\send through the AJAX HTTP request?

项目订单更改时如何执行AJAX HTTP请求？您建议考虑通过AJAX HTTP请求发送什么数据？

1 个解决方案

#1

i recently used jqueryUI sortable jquery ui sortable doc

我最近使用jqueryUI sortable jquery ui sortable doc

i use a db field called 'order_by' INT field.

我使用名为'order_by'INT字段的db字段。

what you need is just to apply the jqueryUI sortable() to the elements list you want and then pass via ajax the serialized new order (check ui options for sortable, it has serialize or toArray {option}) to your controller page.

你需要的只是将jqueryUI sortable（）应用于你想要的元素列表，然后通过ajax将序列化的新命令（检查可排序的ui选项，它有serialize或toArray {option}）传递给你的控制器页面。

you save the new order into db and you've fiished. In my case each 'order_by' fields is updated everytime i save the new order.

你将新订单保存到数据库中并且已经完成了。在我的情况下，每次保存新订单时，每个'order_by'字段都会更新。

edit

编辑

$("#test-list").sortable({
                    cursor: 'move',
                    placeholder:'sortbale-highlight-holder',
                    tolerance:'pointer',
                    update: function() {
                    new_order = $(this).sortable("serialize");
                    somenthing_was_ordered = 1;
                }
        });

logic i used is:

我使用的逻辑是：

user change order and i set the new order in a global var. then i use a submit input to send the ajax request and save the new order.

用户更改订单，我在全局变量中设置新订单。然后我使用提交输入发送ajax请求并保存新订单。

in update: function(){ } you can launch a request anytime, cause you can return anytime the new order into an ajax call, but i preferred to save some memory for server requests :)

在更新：function（）{}您可以随时启动请求，因为您可以随时将新订单返回到ajax调用，但我更喜欢为服务器请求保存一些内存:)

#1