Сохранение настроек сортировки в MySQL с использованием PHP, перетаскивание

Question

Сохранение настроек сортировки в MySQL с использованием PHP, перетаскивание

0

Я использую JQuery для предоставления моим пользователям переупорядочиваемого списка элементов. Как это:

Здесь простой HTML:

      <ul class="sortable">
      <li>Item 1<i class="sorthandle"></i></li>
      <li>Item 2<i class="sorthandle"></i></li>          
      </ul>

Функция перетаскивания отлично работает. Следующий шаг - сохранение предпочтений сортировки пользователей в базе данных. Я планирую добавить столбец "приоритет" в мою базу данных, где будет храниться целое число, представляющее предпочтительный порядок сортировки пользователя. Затем мой запрос будет Order by 'priority' ASC.

Я думаю, мне нужно создать массив порядка сортировки, отображаемого на экране перетаскивания, а затем сохранить эти значения в записях базы данных. Но, как новичок в JavaScript, мне нужна помощь.

Мой JavaScript

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
  $(".sortable").sortable({
    connectWith: ".sortable",
    handle: '.handle'
  }).disableSelection();

});
</script>

Создание списка перетаскивания через PHP:

while ($row = mysqli_fetch_array($result)){
  $playlistname = $row['name'];
  $id = $row['id'];
  echo "<li>$playlistname<i class='handle fa fa-bars'></i></li>";

}

jumpingmaniac 23 май 2018, в 21:27

Источник

Теги:

php

mysql

javascript

2 ответа

1

Прежде всего, JavaScript потребует идентификаторы, а не только имя. Вы можете просто поместить их в атрибут данных (я также избавился от ненужных назначений переменных и построил строку с конкатенацией)

echo '<li data-id="' . $row['id'] . '">' . $row['name'] . '<i class="handle fa fa-bars"></i></li>';

Затем вы можете извлечь этот атрибут данных в JavaScript и создать массив. Вы можете подумать о том, когда вы сохраните настройки. Самый простой способ - предоставить кнопку. Вы также можете сделать это на сортируемом событии обновления (например, после "удаления" элемента). Но это опасно и может перегрузить ваш сервер.

Чтобы запустить AJAX POST на кнопку мыши, поместите этот код в $(function() {. Он связывает функцию лямбда на click события элемента DOM с идентификатором save, f.ex. <button id="save">save order</button>

// bind a callback to the button click
$('#save').on('click', function () {
    // array where we store the IDs
    var ids = [];
    // loop through the <li> and extract data-id
    $('.sortable li').each(function() {
        ids.push($(this).data('id'));
    });

    // AJAX POST the array to a PHP script
    $.post('/savescript.php', {'ids[]': ids});
});

вы можете получить доступ к данным в $_POST['ids'].

masterfloda 23 май 2018, в 20:37

Ещё вопросы

jumpingmaniac · Accepted Answer · 2018-05-23T18-05-00.000Z

Я смог выполнить это без написания JavaScript. PHP работал просто отлично!

PHP - Получение ценностей

<?php
$sql = "SELECT name, id FROM playlists WHERE userid = 'XX' AND active = 1 ORDER BY priority ASC";
$row = mysqli_fetch_array($result,MYSQLI_ASSOC);
$result = mysqli_query($conn,$sql);

 ?>
<form action="" method="POST">

<div class="container">
      <ul class="sortable">

        <?php
          while ($row = mysqli_fetch_array($result)){ /* FETCH ARRAY */
          $playlistname = $row['name'];
          $id = $row['id'];
          echo "<li>$playlistname<i class='handle fa fa-bars'><input type='hidden' name='sort[]' value='$id' /></i></li>";
          }
        ?>

        </ul>
</div>
<center><button name="submit" id="sortsavebutton" type="SUBMIT" value="submit" action="POST">Save</button></center><br>
</form>

Обработка при сохранении/представлении

if (isset($_POST['submit'])){
    $rearrange = $_POST['sort'];
    $count = count($rearrange);
    $sort = 0;
    for($i=0;$i<$count;$i++){

        if(!empty($rearrange[$i])){ 

        $id = mysqli_real_escape_string($conn,$rearrange[$i]); /* ESCAPE STRINGS */
    $priority = $sort++;
    $stmt = $conn->prepare("UPDATE playlists SET priority=? WHERE id = ?");
    $stmt->bind_param("ii", $priority, $id);
    $stmt->execute();

          } 

    } 

}

Ваш код чрезвычайно уязвим для внедрения SQL
@masterfloda Смотрите мой обновленный код.
Спасибо за то, что приняли совет и улучшили свой код (вы не поверите, сколько людей просто не могли быть подвергнуты риску)! Вы также должны пометить свой ответ как принятый, чтобы указать, что проблема решена. Я также буду держать свой ответ там, потому что он показывает другой подход.