保存排序顺序并填充排序记录 jquery UI Sortable答案

【问题标题】：save sort oder and populate sorted records jquery UI Sortable保存排序顺序并填充排序记录 jquery UI Sortable
【发布时间】：2013-02-18 05:57:28
【问题描述】：

嗨，我正在使用jquery ui sortable 对我的 div 进行排序。我可以将 div oder 保存在数据库中，这是我的代码

<div style="margin:0 auto !important;">
    <ul id="sortable1" class="connectedSortable">
        <li id="one_1" class="ui-state-default"><div>Item 1</div></li>
        <li id="one_2" class="ui-state-default"><div>Item 2</div></li>
        <li id="one_3" class="ui-state-default"><div>Item 3</div></li>
        <li id="one_4" class="ui-state-default"><div>Item 4</div></li>
        <li id="one_5" class="ui-state-default"><div>Item 5</div></li>
    </ul>

    <ul id="sortable2" class="connectedSortable">
        <li id="two_1" class="ui-state-highlight"><div>Item 1</div></li>
        <li id="two_2" class="ui-state-highlight"><div>Item 2</div></li>
        <li id="two_3" class="ui-state-highlight"><div>Item 3</div></li>
        <li id="two_4" class="ui-state-highlight"><div>Item 4</div></li>
        <li id="two_5" class="ui-state-highlight"><div>Item 5</div></li>
    </ul>
</div>



<script type="text/javascript">
  jQuery(function() {

    var sortable1 = 'one_1,one_2,one_3,one_4,one_5';
    var sortable2 = 'two_1,two_2,two_3,two_4,two_5';

    jQuery( "#sortable1, #sortable2" ).sortable({
        update: function(event, ui) {

            var newOrder = jQuery(this).sortable('toArray').toString();
            if(jQuery(this).attr('id')=="sortable1"){
                sortable1 = newOrder;
            }
            else {
                sortable2 = newOrder;
            }

            console.log(sortable1);
            console.log(sortable2);
        }

    }).disableSelection();
  });
  </script>

我可以将排序后的 div 顺序正确保存到 DB，但我不知道如何填充 div 以再次更正顺序。请帮我。在此先感谢。

【问题讨论】：

您需要提供填充 div 的 php 代码。
如何在数据库中保存排序顺序？
作为逗号分隔的字符串值 -> 1,2,3,4,5

标签： php jquery jquery-ui jquery-ui-sortable

【解决方案1】：

与其将排序顺序作为逗号分隔值1,2,3,4,5 保存到数据库，不如只保存“排序列”，例如#sortable1 这样当您加载 div 时，您只需将此值传递给您的 js 逻辑。

例子：

如果您在数据库中保存排序列名称#sortable1 或#sortableN，那么您最终会得到

    var newOrder = jQuery(this).sortable('toArray').toString();
    if(jQuery(this).attr('id')== "<% $your_php_variable %>"){
        sortable1 = newOrder;
    }
    else {
        sortable2 = newOrder;
    }

我不确定您是如何将 php 变量传递给 UI 的，这就是我输入的 <% $your_php_variable %>。在您的 php 代码中的某个时刻，您将设置 $your_php_variable = '#sortableX';

【讨论】：