У меня есть следующий код для получения данных из базы данных и сортировки перетаскиваемого списка с использованием элементов 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
в базу данных, если переупорядочены элементы списка.?
У 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
q8scool_exam
Этоq8scool_exam
вопрос?