+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Сортировка блоков через jQuery UI и запись, сохранение позиций в базу данных

В этой статье мы рассмотрим пример использования jQuery UI для сортировки блоков и запись их новых позиций в базу данных.

Создадим небольшую таблицу в нашей базе данных


При выводе записей на страницу мы сортируем их по столбцу `s`
SQL запрос: SELECT * FROM `my_item` ORDER BY `s` asc

Подключаем скрипты
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
Выводим наши блоки из базы данных
Сортируемые элементы должны быть в контейнере с идентификатором sortable.
<div id="sortable">
<?php
// выводим наши блоки
$sql=$mi->query("SELECT * FROM `table` ORDER BY `s` asc");
while($d=$sql->fetch_array()):
print '<div id="item-'.$d["id"].'">'.$d["name"].'</div>';
endwhile;
?>
</div>
Важно! У каждого элемента должен быть идентификатор вида item-N, где N - это уникальный идентификатор из нашей таблицы (число, находящееся в столбце `id`).

Немного js кода
<script type="text/javascript">
$(document).ready(function() {
$('#sortable').sortable({
axis: 'y',
cursor:'move',
update: function (event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
data: data,
type: 'POST',
url: '_ajax.php',
success:function(html){
$("#result").html(html);
}
});
}
});
});
</script>
Содержимое файла _ajax.php
<?php
// вводим переменную
$i=1;
foreach($_POST['item'] as $value):
// $value - это постоянный идентификатор элемента (id)
// обновляем таблицу
// $i - это новая позиция элемента, её мы и вносим в столбец `s`
$mi->query("update `table` set `s`='$i' where `id`='$value'");
$i++;
endforeach;
?>

Демонстрация


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 1524