Сегодня речь пойдет о выводе товаров или чего-нибудь еще в определенном порядке, порядок это храниться будет в базе данных, как и другие характеристики товара. Но вместо того, чтобы выводить индексы и предоставлять возможность их менять, мы сделаем изменения порядка в стиле Web 2.0. Для начала нам понадобится база данных, в которой и будет храниться вся нужная информация. Я создал простую базу, сохраняющую лишь ID, миниатюру, название и порядок вывода.
Далее нам нужно скачать jQuery UI и плагин к нему sortable, который и будет выполнять почти всю черную работу на клинтской части. Скачать их можно с официального сайта jQuery UI.
После нажатия на кнопку «Закончить» мы по средстам AJAX будем отправлять массив, содержащий новую очередность нашему скрипту. Именно он будет записывать новый порядок в базу данных. Надеюсь, код не вызовет затруднений, я старался его подробно комментировать.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Изменение порядка следования товаров</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
/**
* функция для записи результатов изменения порядка
*
*/
$('document').ready(function() {
var order = 0;
$('#sortable').sortable(
{
opacity: 0.6, // меньше прозрачность при перемещении
update: function() {
order = $('#sortable').sortable('toArray'); // массив с порядком
$('p#info').text('Не забудьте сохранить изменения');
}
});
$('button').click(function() {
$('p#info').load('sortable-helper.php?items=' + order.join(','));
// AJAX запрос с массивом в качестве параметра
});
});
</script>
</head>
<body>
<?php
/*подключения к базе данных*/
$hostname = 'localhost';
$username = 'username';
$password = 'password';
$dbname = 'database';
$conn = mysql_connect($hostname, $username, $password);
if ($conn) {
mysql_select_db($dbname);
$sql = "SELECT *"
. " FROM product_tbl"
. " WHERE new_prod > 0 ORDER BY new_prod DESC";
$res = mysql_query($sql);
echo '<ul id="sortable">';
/*вывод товаров*/
while($row = mysql_fetch_object($res)) {
?>
<li id="<?php echo $row->id;?>">
<img src="<?php echo $row->photo;?>" />
<?php echo $row->name;?></li>
<?php
}
echo '</ul><div class="clear"></div>';
} else {
echo mysql_error();
}
?>
<div>*Для изменения порядка просто перетаскивайте элементы, удерживая левую кнопку мыши.
Элементы в начале списка выводятся в первую очередь.</div>
<button>Закончить изменение</button>
<p id='info'> </p>
</body>
</html>
Скрипт сохранения нового порядка в базу данных
<?php
$hostname = 'localhost';
$username = 'username';
$password = 'password';
$dbname = 'database';
$conn = mysql_connect($hostname, $username, $password);
if ($conn) {
mysql_select_db($dbname);
$itemsArray = array_reverse(explode(',', $_GET['items']));
for($item = 1; $item <= count($itemsArray); $item++) {
$sql = "UPDATE product_tbl SET new_prod=" . $item . " WHERE id=" . $itemsArray[$item-1] . " LIMIT 1";
mysql_query($sql) or die('Перемещение не выполнено');
}
echo 'Порядок был успешно изменен.';
}
?>
Оказывается нет ничего в этом сложного, а пользователей такая возможность приятно удивит.