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

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 记录移动后更新其优先级。但是，我只能找到有关如何使用不再可用的 JsHelper 在旧版本的 CakePHP 中执行此操作的示例。

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

Answer 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

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

CakePHP 3.x update records with jQueryUI Sortable

ajax

cakephp

jquery-ui-sortable

cakephp-3.0