jquery - CakePHP 3 - 允许用户分配和更改记录查询的顺序

Question

目前在我的系统中，通过 CakePHP 3，对 MySQL 数据库进行查询以搜索 slideshow plugin 中使用的照片列表。 .用户选择要在幻灯片中使用的照片，并可以在幻灯片中添加或删除照片。但是，他们目前无法选择幻灯片显示这些照片的顺序。

在 Controller 中，查询如下所示:

$imagesUsed = $this->Gallery->find('all',[
    'conditions' => ['status' => 'shown', 'type' => 'image']
])->toArray();

在显示幻灯片的页面上:

<script>
    $(function () {
        jQuery(document).ready(function () {
            $('#header').backstretch([
                <?php foreach ($imagesUsed as $image){ ?>
                "<?= $host.$basepath ?>/webroot/uploads/<?= $image->link ?>",
                <?php } ?>
            ], {duration: 2000, fade: 750});
        });
    });
</script>

我想知道如何为查询的幻灯片照片分配编号以向用户清楚地显示顺序，并允许他们更改该顺序。例如:

• 水果幻灯片目前有一张苹果图片 (1) 和一张香蕉图片 (2)。
• 然后，用户想要为幻灯片上传一张 Peach 图片，但不想将其添加为第三张图片，而是想将 Peach 更改为第一张图片。他们不希望必须从幻灯片中删除所有图像，然后以正确的顺序重新添加图像。

更新:我在数据库表中添加了一个 custom_sort 列。我还制作了一个带有 foreach 循环的表单，以及一个在选择选项时包含 JavaScript onchange 函数的下拉选择。我正在努力寻找一种将两者结合在一起的方法。

使用 Foreach 循环形成(不完整):

<?php $this->Form->create($gallery) ?>
<legend><?= __('Update Image Order') ?></legend>
<fieldset>
    <div class="container col-sm-12">
        <?php foreach ($galleries as $gallery): ?>
            <div class="col-sm-4">
                <?php echo $this->Form->input('link',['class' => 'form-control', 'readonly']); ?>
            </div>
            <div class="col-sm-4">
                <?php echo $this->Form->input('name',['class' => 'form-control', 'readonly']); ?>
            </div>
            <div class="col-sm-2">
                <?php echo $this->Form->input('page', ['class' => 'form-control', 'readonly']); ?>
            </div>
            <div class="col-sm-2">
                <?php echo $this->Form->input('custom_sort', ['label' => 'Slideshow Order', 'class' => 'form-control']); ?>
            </div>
        <?php endforeach ?>
    </div>
</fieldset>
<div style="text-align: center">
    <?php echo $this->Form->button(__('Submit'), ['class' => 'btn btn-secondary btn-xl page-scroll']) ?>
</div>
<?php $this->Form->end() ?>

在 Controller 中:

public function updateorder()
{
    $galleries = $this->Galleries->find('all',[
        'conditions' => ['status' => 'shown', 'type' => 'image'],
        'order' => ['custom_sort' => 'ASC']
    ])->toArray();

    if ($this->request->is(['patch', 'post', 'put'])) {
        $galleries = $this->Galleries->patchEntities($galleries, $this->request->data);
        if ($this->Galleries->updateAll([$galleries], [])) {
            $this->Flash->success(__('The image slideshow orders have been updated.'));

            return $this->redirect(['action' => 'managemedia']);
        } else {
            $this->Flash->error(__('The image slideshow orders could not be updated. Please, try again.'));
        }
    }
    $this->set(compact('galleries'));
    $this->set('_serialize', ['galleries']);
}

下拉选择和 JavaScript onchange 函数(不完整):

<label for="page" id="pageLabel" style="text-align: left">Page</label>
<select name="page" id="page" onchange="changePage()" class="form-control">
    <option value="" disabled selected hidden>Select a page</option>
    <option value="Home">Home</option>
    <option value="Fruits">Fruits</option>
    <option value="Vegetables">Vegetables</option>
</select>

<script>
function changePage() {
    var pageChoice = document.getElementById('page');
    var selectedPageChoice = pageChoice.options[pageChoice.selectedIndex].value;
    $.ajax({
        url: "<?= $host . $basepath ?>/gallery.json",
        type: 'POST',
        success: function (res) {
            console.log(res);
        }
    })
}
</script>

console.log(res) 在浏览器控制台中显示了这个:

> Object
  > galleries: Array (x) //galleries being the array variable set in the AJAX request URL, Array (x) referring to the number of elements in that array.
    > 0: {id: 1, link: "images/apples.jpg", name: "Apple", page: "Fruits", custom_sort: 1}
    > 1: {id: 2, link: "images/banana.jpg", name: "Banana", page: "Fruits", custom_sort: 2}
    > 2: {id: 3, link: "images/pumpkin.jpg", name: "Pumpkin", page: "Vegetables", custom_sort: 1}
    > 3: {id: 4, link: "images/peach.jpg", name: "Peach", page: "Fruits", custom_sort: 3}

我可以像这样从中检索单个值:

console.log(res.galleries.0.link); 将在控制台中打印 Peach。

目前表单显示 4 个重复的表单输入(等于现有条目的数量)，尽管它们都是空白的。

Answer 1

您可以使用 jQuery UI Sortable ( http://jqueryui.com/sortable/ )。您可以在发布时序列化您的排序顺序，并使用 AJAX 请求更新您的数据库。