jQuery UI — сортировка в стиле web 2.0

by Вредный • 16.04.2010 • jQuery, php • Комментарии [10]

Сегодня речь пойдет о выводе товаров или чего-нибудь еще в определенном порядке, порядок это храниться будет в базе данных, как и другие характеристики товара. Но вместо того, чтобы выводить индексы и предоставлять возможность их менять, мы сделаем изменения порядка в стиле Web 2.0. Для начала нам понадобится база данных, в которой и будет храниться вся нужная информация. Я создал простую базу, сохраняющую лишь ID, миниатюру, название и порядок вывода.

Далее нам нужно скачать jQuery UI и плагин к нему sortable, который и будет выполнять почти всю черную работу на клинтской части. Скачать их можно с официального сайта jQuery UI.

После нажатия на кнопку «Закончить» мы по средстам AJAX будем отправлять массив, содержащий новую очередность нашему скрипту. Именно он будет записывать новый порядок в базу данных. Надеюсь, код не вызовет затруднений, я старался его подробно комментировать.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

<!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>

Скрипт сохранения нового порядка в базу данных

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?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 'Порядок был успешно изменен.';
}
?>

Оказывается нет ничего в этом сложного, а пользователей такая возможность приятно удивит.

Комментарии к "jQuery UI — сортировка в стиле web 2.0"

VLOmper

11.02.2011 at 00:12

Спасибо большое за статью. Очень помогла при разработке сортировки в админке.
Жаль нет кнопочки удалить, я ее дописал себе, но работает она как-то не важно.
Еще раз спасибо за статью.

Ответить
- Вредный
  
  11.02.2011 at 10:35
  
  рад, что вам заметка пригодилась
  по поводу удаления, скорее всего нужно переназначить порядок в базе данных, чтобы не было пробелов.
  
  Ответить
Nik

21.11.2011 at 18:24

Вопрос, который посетит каждого новичка: а куда подключается экшн на кнопку отправить дополните статью

Ответить
- Вредный
  
  21.11.2011 at 22:02
  
  Или я немного не понял вопрос или ответ кроется на него в 26-й строке первого листинга.
  
  Ответить
Nik

22.11.2011 at 11:43

Добрый день! Такой вопрос:
У меня есть дерево товаров, т.е. группы и подгруппы:
Комплектующие
-Материнки
-Память
-Процы
Расходные материалы
-бумага
-картриджи
и тд.
Я в Ajax не силен совсем и хотелось бы спросить у автора, как переделать скрипт, чтоб можно было перемещать как группы товара целиком, так и их подгруппы внутри группы?!

Ответить
- Вредный
  
  25.11.2011 at 13:06
  
  вряд ли вам подойдет моя реализация, я бы решал вашу задачу с помощью плагина для jQuery, который позволяет отображать деревья и сортировать элементы в них содержащиеся.
  
  Ответить
Валерий

23.11.2011 at 18:30

Доброе время суток!
Уважаемый автор, спасибо за прекрасную реализацию и скажи пожалуйста, как передать переменную ID_GROUP вот в этой строке:
$(‘p#info’).load(‘sortable-helper.php?items=’ + order.join(‘,’));

?
Заранее спасибо. Очень жду ответа.

Ответить
- Вредный
  
  25.11.2011 at 13:04
  
  Это можно сделать примерно так:
  
  1
  $(‘p#info’).load(‘sortable-helper.php?id_group=' + ID_GROUP + '&items=’ + order.join(‘,’));
  
  Ответить
Валерий

23.11.2011 at 19:41

смысл в том, что скрипту «sortable-helper.php» требуется передать переменную ID_GROUP. Пишу к тому, что может есть другой способ передачи или как добавить переменную к строке, которую указал в предыдущем комментарии?!

Ответить
- Вредный
  
  25.11.2011 at 13:05
  
  на серверной стороне еще проще:
  
  1
  $idGroup = $_REQUEST['id_group'];
  
  Ответить

Вредный и его заметки

jQuery UI — сортировка в стиле web 2.0

by Вредный • 16.04.2010 • jQuery, php • Комментарии [10]

Вредный

Комментарии к "jQuery UI — сортировка в стиле web 2.0"

Добавить комментарий Отменить ответ