将jQuery UI-Sortable的位置保存到数据库中

Question

我正在尝试为一位拥有小型网络电台的朋友复制此页面的功能 (http://www.kissfm.ro/fresh-top-40/)。该网站使用了WordPress进行设置。

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

谢谢您提前的帮助！（欢迎提供代码或教程链接！）

- user899163

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

- Mihai Iorga

---

谢谢！那解决了问题，虽然我们又花了一天时间才弄清楚如何保存每个提交并获取中位数值。 - user899163

由于你正在修改服务器上的数据，所以应该使用 POST 而不是 GET，这样更为合适。此外，如果服务器保存不成功，可以考虑使用 beforeStop 方法，在服务器保存失败时取消排序操作。 - Ryan

Answer 2

我知道这个问题有点老，但我的做法是在每个LI元素中添加一个隐藏的输入框。它们都有相同的名称并以[]结尾。这样，当您提交包含UL的表单时，您将在提交值中获得一个数组，其顺序与您刚刚排列列表的顺序相同。

- Jon Koeter

Answer 3

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

希望它有所帮助 ;)

- Husni Salax

Answer 4

根据Sortable文档，我们需要在LI的id前加上一些字符串。 然后，如果我们在update方法中序列化sortable，我们将得到一个漂亮的数组，例如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>

- Svetoslav Marinov