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

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

在控制器中，查询如下所示：

$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>

下拉选择和JavaScript onchange函数（不完整）：

<?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() ?>

<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.galleries.0.link）将在控制台中打印桃子

目前，表单显示了4个表单输入的副本（等于现有条目的数量），尽管它们都是空的。
您可以使用jQuery UI Sortable（）。您可以在发布时序列化排序顺序，并使用AJAX请求更新数据库。
您可以使用jQuery UI Sortable（）。您可以在发布时序列化排序顺序，并使用AJAX请求更新数据库。
我通常在数据库中添加一个名为sortable或custom_sort的列

您可以给用户一个输入来指定他们自己的顺序

您的查询如下所示

// Notice I call Galleries. This may not be right for you, 
// but cake convention is plural table names
// I also use where() instead of conditions. This is also a suggestion
$images = $this->Galleries->find('all')
    ->where(['status' => 'shown', 'type' => 'image'])
    ->order(['custom_sort' => 'ASC']);

$requestData = [
    [
        'id' => 100,
        'custom_sort' => 1,
    ],
    [
        'id' => 200,
        'custom_sort' => 2,
    ],
    [
        'id' => 300,
        'custom_sort' => 3,
    ]
];

我还建议不要自己调用toArray，只需设置serialize变量即可

$this->set(['images' => $images]);
$this->set('_serialize', 'images');

并确保您的请求需要json

$.ajax({dataType:'json'});

提交更新订单

在更新图像时，您可以进行大规模更新，前提是您发布的数据如下所示

// Notice I call Galleries. This may not be right for you, 
// but cake convention is plural table names
// I also use where() instead of conditions. This is also a suggestion
$images = $this->Galleries->find('all')
    ->where(['status' => 'shown', 'type' => 'image'])
    ->order(['custom_sort' => 'ASC']);

$requestData = [
    [
        'id' => 100,
        'custom_sort' => 1,
    ],
    [
        'id' => 200,
        'custom_sort' => 2,
    ],
    [
        'id' => 300,
        'custom_sort' => 3,
    ]
];

您可以像这样快速保存数据

$galleries = $this->Galleries->newEntities($requestData);
// This does not call callbacks (beforeSave, afterSave)
$this->Galleries->updateAll($galleries);

根据问题进行编辑

更新多个记录可能是这样的

// Notice I call Galleries. This may not be right for you, 
// but cake convention is plural table names
// I also use where() instead of conditions. This is also a suggestion
$images = $this->Galleries->find('all')
    ->where(['status' => 'shown', 'type' => 'image'])
    ->order(['custom_sort' => 'ASC']);

$requestData = [
    [
        'id' => 100,
        'custom_sort' => 1,
    ],
    [
        'id' => 200,
        'custom_sort' => 2,
    ],
    [
        'id' => 300,
        'custom_sort' => 3,
    ]
];

在图像的输出循环中

<?php foreach($images as $image): ?>
    <input data-image_id="<?= $image->id; ?>" class="image-custom-sort" value="<?= $image->custom_sort; ?>" />
<?php endforeach; ?>
<button onClick="handleSubmit">Save Sort Order</button>

我通常在数据库中添加一个名为sortable或custom_sort的列

您可以给用户一个输入来指定他们自己的顺序

您的查询如下所示

// Notice I call Galleries. This may not be right for you, 
// but cake convention is plural table names
// I also use where() instead of conditions. This is also a suggestion
$images = $this->Galleries->find('all')
    ->where(['status' => 'shown', 'type' => 'image'])
    ->order(['custom_sort' => 'ASC']);

$requestData = [
    [
        'id' => 100,
        'custom_sort' => 1,
    ],
    [
        'id' => 200,
        'custom_sort' => 2,
    ],
    [
        'id' => 300,
        'custom_sort' => 3,
    ]
];

我还建议不要自己调用toArray，只需设置serialize变量即可

$this->set(['images' => $images]);
$this->set('_serialize', 'images');

并确保您的请求需要json

$.ajax({dataType:'json'});

提交更新订单

在更新图像时，您可以进行大规模更新，前提是您发布的数据如下所示

// Notice I call Galleries. This may not be right for you, 
// but cake convention is plural table names
// I also use where() instead of conditions. This is also a suggestion
$images = $this->Galleries->find('all')
    ->where(['status' => 'shown', 'type' => 'image'])
    ->order(['custom_sort' => 'ASC']);

$requestData = [
    [
        'id' => 100,
        'custom_sort' => 1,
    ],
    [
        'id' => 200,
        'custom_sort' => 2,
    ],
    [
        'id' => 300,
        'custom_sort' => 3,
    ]
];

您可以像这样快速保存数据

$galleries = $this->Galleries->newEntities($requestData);
// This does not call callbacks (beforeSave, afterSave)
$this->Galleries->updateAll($galleries);

根据问题进行编辑

更新多个记录可能是这样的

// Notice I call Galleries. This may not be right for you, 
// but cake convention is plural table names
// I also use where() instead of conditions. This is also a suggestion
$images = $this->Galleries->find('all')
    ->where(['status' => 'shown', 'type' => 'image'])
    ->order(['custom_sort' => 'ASC']);

$requestData = [
    [
        'id' => 100,
        'custom_sort' => 1,
    ],
    [
        'id' => 200,
        'custom_sort' => 2,
    ],
    [
        'id' => 300,
        'custom_sort' => 3,
    ]
];

在图像的输出循环中

<?php foreach($images as $image): ?>
    <input data-image_id="<?= $image->id; ?>" class="image-custom-sort" value="<?= $image->custom_sort; ?>" />
<?php endforeach; ?>
<button onClick="handleSubmit">Save Sort Order</button>

这不完全是我想要的-这更像是一个：我可以为第3项输入一个新的数字，使之成为第1项。所有图像都显示在一个表格中，而不是像演示一样的HTML列表-因为有多个幻灯片，每个幻灯片都有自己的序列，拖动表格行会非常混乱。为了澄清，我的意思是，用户从一个显示所有图像的表格中选择特定幻灯片的图像。这不完全是我想要的-这更像是一个：我可以为项目3输入一个新的数字，使其成为项目1。所有图像都显示在一个表格中，而不是像演示一样的HTML列表-因为有多个幻灯片，每个幻灯片都有自己的序列，拖动表格行会非常混乱。为了澄清，我的意思是，用户从显示所有图像的表格中选择特定幻灯片的图像。对于多个数据更新，该表格会是什么样子？我需要使用foreach语句吗？我以前从来没有真正做过多次数据更新，所以这对我来说都是全新的。此外，我还有一个额外的下拉菜单，用于切换记录显示的内容（例如，在下拉菜单中选择水果将仅切换所有水果图像）。我曾考虑使用JS onchange函数，然后使用AJAX请求从数据库中提取适当的数据，但同样，我不确定如何从成功回调中获取多个记录及其值（我可以获取一个）。@mistaq-我已使用可能的解决方案更新了我的答案。对于多个数据更新，表单会是什么样子？我需要使用foreach语句吗？我以前从来没有真正做过多次数据更新，所以这对我来说都是全新的。此外，我还有一个额外的下拉菜单，用于切换记录显示的内容（例如，在下拉菜单中选择水果将仅切换所有水果图像）。我曾考虑使用JS onchange函数，然后使用AJAX请求从数据库中提取适当的数据，但同样，我不确定如何从成功回调中获取多个记录及其值（我可以得到一个）。@mistaq-我已经用一个可能的解决方案更新了我的答案。