【问题标题】: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});
                }
            });
        });
        

        希望对你有所帮助;)

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2016-05-01
          • 1970-01-01
          • 1970-01-01
          • 2015-09-16
          • 1970-01-01
          • 2012-02-03
          • 2011-02-09
          相关资源
          最近更新 更多