如何将排序的jQueryUI排序列表存储在数据库中[重复]

Posted 2023-02-24

【中文标题】如何将排序的jQueryUI排序列表存储在数据库中[重复]

【英文标题】：How to store sorted jQueryUI sorted list in database [duplicate]

【发布时间】：2017-04-03 20:27:38

【问题描述】：

我已经使用 jqueryui 实现了一个拖放排序列表，如下例所示。

html

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

javascript

 <script>
  $( function() 
    $( "#sortable1, #sortable2" ).sortable(
      connectWith: ".connectedSortable"
    ).disableSelection();
   );
  </script>

我在下面创建了一个更新按钮。按下更新按钮后，我必须将重新排列的列表存储到数据库中。

但我不知道该怎么做，我需要一些建议，我不知道从哪里开始。

谢谢。

【问题讨论】：

为什么不给每个 LI 一个 ID，然后提取 ID 和文本以 JSON 格式发送到服务器。 ?

感谢您的快速回复，您能举例说明您的想法吗？

其实我找到了一个几乎相同标题的副本

【参考方案1】：

使用单个项目列表，您可以这样做

<form>
<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1<input type="hidden" name="sortorder[]" value="1" /></li>
  <li class="ui-state-efault">Item 2<input type="hidden" name="sortorder[]" value="2" /></li>
  <li class="ui-state-default">Item 3<input type="hidden" name="sortorder[]" value="3" /></li>
  <li class="ui-state-default">Item 4<input type="hidden" name="sortorder[]" value="4" /></li>
  <li class="ui-state-default">Item 5<input type="hidden" name="sortorder[]" value="5" /></li>
</ul>
</form>


$( "#sortable1" ).sortable(
    cursor: "move",
    items: "> li",
    update: function() 
        var neworder = $('#sortable1').parent('form').serialize();
        $.ajax(
            data: neworder,
            type: 'POST',
            url: 'updateportfolioorder.php'
        );
    
);