将 jquery ui-sortable 位置保存到 DB

Posted 2023-02-24

【中文标题】将 jquery ui-sortable 位置保存到 DB

【英文标题】：save jquery ui-sortable positions to DB

【发布时间】：2011-10-29 03:46:05

【问题描述】：

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

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

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

【参考方案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);
        
    );
);

希望对你有所帮助；）