CakePHP 3.x 使用 jQueryUI Sortable 更新记录答案

【问题标题】：CakePHP 3.x update records with jQueryUI SortableCakePHP 3.x 使用 jQueryUI Sortable 更新记录
【发布时间】：2016-04-28 22:40:24
【问题描述】：

在其中一个视图中，我实现了一个列表，可以使用jQueryUI Sortable 拖放重新排序。

meetings.ctp 中的列表输出如下所示：

<ul id="sortable">
    <?php foreach($meetings as $meeting): ?>
    <li class="ui-state-default">>
      <?php echo  $meeting['name'] . ' ' . $meeting[place]; ?>
    </li>
    <?php endforeach; ?>
</ul>

会议列表是根据优先级提供的：

$upcommingMeetings_query = $this->MeetingsTasks->find('all')
    ->order(['Meetings.priority' => 'ASC']);

我需要做的是在 Meeting 记录被移动后更新它的优先级。但是，我只能找到如何在旧版本的 CakePHP 中使用不再可用的 JsHelper 执行此操作的示例。

非常感谢任何帮助或指导。如果有任何我应该分享的代码，请索取。

【问题讨论】：

你遇到了什么问题

标签： ajax cakephp cakephp-3.0 jquery-ui-sortable

【解决方案1】：

首先从<li class="ui-state-default">> 行中删除多余的>，然后使用sortable 的stop 事件

$( "#selector" ).sortable({
  stop: function( event, ui ) {
    //Invoke the serialize method:
    var sorted = $(this).sortable('serialize');
    console.log(sorted);
    //output: 'sort[]=4&sort[]=1&sort[]=2&sort[]=5&sort[]=3'
    //here goes your ajax request to server
    $.ajax({
       url: 'someURL',
       cache: false,
       type: 'post',
       data: sorted,
       success: function(result) {//parse it here}
    });
  }
});

您的.ctp 代码应该是这样的：

<ul id="sortable">
    <?php foreach($meetings as $meeting): ?>
        <li class="ui-state-default" id="sort-<?php echo $meeting['id']; ?>">
           <?php echo  $meeting['name'] . ' ' . $meeting['place']; ?>
        </li>
    <?php endforeach; ?>
</ul>

您可以通过将sort 替换为您想要的任何内容来自定义<li class="ui-state-default" id="sort-<?php echo $meeting['id']; ?>">。

在控制器部分，您必须在 foreach 循环中解析它并相应地更新您的 db，或者您可以按原样保存。 working link

【讨论】：