将 jquery ui-sortable 位置保存到 DB答案

【问题标题】：save jquery ui-sortable positions to DB将 jquery ui-sortable 位置保存到 DB
【发布时间】：2011-10-29 03:46:05
【问题描述】：

我正在尝试为拥有小型网络收音机的朋友复制此页面 (http://www.kissfm.ro/fresh-top-40/) 的功能。该网站是在 wordpress 中设置的，仅供参考。

所以我的问题是，在搜索 stackoverflow 之后，我如何根据用户输入保存/获取修改后的图表？我找到了如何保存单次提交，但如何根据用户选择获得最终图表？

提前致谢！（欢迎代码或教程链接！）

【问题讨论】：

标签： php jquery wordpress jquery-ui

【解决方案1】：

使您的 HTML 可排序，添加 javascript，并在更新时保存到 php。

<ul id="sortable">
    <li id="1">elem 1</li>
    <li id="2">elem 2</li>
    <li id="3">elem 3</li>
    <li id="4">elem 4</li>
</ul>

$(document).ready(function(){
    $('#sortable').sortable({
        update: function(event, ui) {
            var newOrder = $(this).sortable('toArray').toString();
            $.get('saveSortable.php', {order:newOrder});
        }
    });
});

【讨论】：

谢谢！这样就成功了，尽管我们花了一天的时间才弄清楚如何保存每个提交并获得中间值。
您是否应该使用 post 而不是 get，因为您正在修改服务器上的数据？另外，如果服务器保存不成功会发生什么？如果服务器保存失败，也许应该使用 beforeStop 方法并取消排序？

【解决方案2】：

我知道这是旧的，但我所做的只是在每个 LI 中添加一个隐藏的输入元素。它们都将具有相同的名称，末尾带有 []。这样，当您发布包含 UL 的表单时，您将按照您刚刚放置列表的顺序在您的帖子值中获得一个数组。

【讨论】：

【解决方案3】：

根据 Sortable 文档，我们必须在 LI 的 id 前面加上一些字符串。然后，如果我们在更新方法中序列化可排序，我们将在 php 中得到一个不错的数组，例如new_order[]=1&new_order[]=2 等

var data = $(this).sortable('serialize');

<ul id="sortable">
    <li id="new_order_1">elem 1</li>
    <li id="new_order_2">elem 2</li>
    <li id="new_order_3">elem 3</li>
    <li id="new_order_4">elem 4</li>
</ul>

【讨论】：

【解决方案4】：

You may POST with input  to DB and save it
Here we go:
<ul id="sortable">
    <li id="1"><input type ="text" value="elem 1"/></li>
    <li id="2"><input type="text" value="elem 2"/></li>
   .
   .
</ul>
<style>
 #sortable{
  border: hidden;
}
</style>
$(document).ready(function(){
    $('#sortable').sortable({
        update: function(event, ui) {
            var newOrder = $(this).sortable('toArray').toString();
            $.get('saveSortable.php', {order:newOrder});
        }
    });
});

希望对你有所帮助；）

【讨论】：