Question

我试图为一个拥有小型网络电台的朋友复制这个页面的功能（http://www.kissfm.ro/fresh-top-40/）。该网站是在wordpress fyi中设置的。

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

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

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

Answer 2

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

Answer 3

根据Sortable文档，我们必须在LI的id上加上一些字符串。然后，如果我们在update方法中序列化sortable，我们将在php中获得一个很好的数组，例如new_order [] = 1＆amp; 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>

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

希望它有所帮助;）

将jquery ui-sortable位置保存到DB

4 个答案: