jquery перетаскиваемый список сохранить положение в базе данных

Question

jquery перетаскиваемый список сохранить положение в базе данных

0

У меня есть следующий код для получения данных из базы данных и сортировки перетаскиваемого списка с использованием элементов jquery ui.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; background-color:#CCC;}
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>

<?php
$con=mysqli_connect("localhost","root","","db_name");

if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$user_id = $_SESSION['user_id'];

$result = mysqli_query($con,"SELECT * FROM users WHERE user_id = '$user_id'");

echo "<ul id='sortable'>";

while($row = mysqli_fetch_array($result))
  {
  echo "<li class='ui-state-default'>" . $row['Name'] . ' ' . $row['UserName'] . $row['sort'] ."</li>";
  }

echo "</ul>";

mysqli_close($con);
?>

Это моя структура таблицы базы данных

Table Name = users
Columns = user_id, Name, UserName, Password, sort

Примеры результатов

user_id     Name    UserName   Password   sort
1           AAA     aa         ***        1
2           BBB     bb         ***        2
3           CCC     cc         ***        3
4           DDD     dd         ***        4

что я прошу, я могу переупорядочить элементы списка, draggable свойства jquery draggable, но как я могу сохранить номер sort в базу данных, если переупорядочены элементы списка.?

mans 11 янв. 2014, в 13:19

Источник

1

Отправьте данные через ajax с помощью этого обработчика событий api.jqueryui.com/sortable/#event-stop
Popnoodles 11 янв. 2014, в 12:13
2

Пароль БД q8scool_exam Это q8scool_exam вопрос?
Popnoodles 11 янв. 2014, в 12:13

Теги:

php

database

jquery

sql

order

1 ответ

Ещё вопросы

Отправьте данные через ajax с помощью этого обработчика событий api.jqueryui.com/sortable/#event-stop
Пароль БД q8scool_exam Это q8scool_exam вопрос?

antony · Answer 1 · 2014-01-11T10-29-00.000Z

У jQuery UI sortable есть обратный вызов остановки, который вызывается, когда вы перестаете перемещать сортировку. Он также имеет функцию сериализации, которую вы можете использовать в сочетании для отправки порядка сортировки в процесс, который обновляет вашу базу данных. Вы можете использовать его следующим образом:

Чтобы использовать serialize вам необходимо изменить свой сортируемый элемент в DOM, чтобы он содержал ссылку на user_id. Например

<li class="ui-state-default" id="id_<?php echo $row['user_id'] ?>">...</li>

Затем, когда вы сериализуете сортировку, он будет создавать список параметров. Вам не нужно использовать атрибут id для ссылки на ваши данные, подробнее о методе сериализации читайте здесь. Но ниже приведен пример того, как вы можете это сделать, используя атрибут id

var $sortable = $( "#sortable" );

$sortable.sortable({
    stop: function ( event, ui ) {
        // parameters will be a string "id[]=1&id[]=3&id[]=10"...etc
        var parameters = $sortable.sortable( "serialize" );

        // send new sort data to process
        $.post("/sort/my/data.php?"+parameters);
    }
});

Затем вам нужен процесс, который получает эти данные и обновляет базу данных. Я оставлю все это до вас, но вот минимальный пример.

<?php
// Store user IDs in array. E.g. array(0 => "1", 1 => "3", 2 => "10"....)
$userIds = $_POST['id'];

// Connect to your database
$conn = mysqli_connect("localhost","root","","db_name");

foreach ($userIds as $key => $userId) {
    $sequence = $key + 1;
    $stmt = $conn->prepare("UPDATE users SET sort = $sequence WHERE user_id = ?");
    $stmt->bind_param("i", (int) $userId);
    $stmt->execute();
}

$stmt->close();

Я понимаю, что этот ответ немного староват, но только для того, чтобы встретить кого-то нового. Не используйте mysqli_connect