带有jQueryUI的CakePHP 3.x更新记录可排序

Question

在其中一个视图中，我实现了一个可以通过与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（不再可用）的示例。

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

Answer 1

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

$("#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> 

您可以自定义<li class="ui-state-default" id="sort-<?php echo $meeting['id']; ?>">这部分用你想要的任何东西代替sort。

在控制器部分，您将不得不在foreach循环中解析它并相应地更新您的db，否则您可能会保存原样。 working link