В этой статье расскажу о модификации функции jquery – sortable. Цель – добавить возможность редактировать поля списка и также сохранять их в базу.
Наш проект состоит из следующих файлов:
index.php – главный файл, здесь мы подключим необходимые библиотеки и стили, а также расположим разметку списка.
update.php – посредством ajax будем отправлять запрос на обновление в этот файл после внесения изменений в списке.
db.php – подключение к базе данных и адреса картинок к всплывающим сообщениям. Всего у нас две картинки – ok.png и error.png, находятся в папке img. Картинки будем выводить в сообщениях об ошибке и после успешного обновления.
sortable.js – обработка событий формы средствами jquery.
Первым делом необходимо создать через phpmyadmin новую базу данных и внести в файл db.php данные:
|
1
2
3
4
|
$dbhost = 'localhost'; // Сервер$dbname = 'name'; // Имя базы данных$dbuser = 'user'; // Имя пользователя$dbpass = 'pass'; // Пароль |
Затем выполняем импорт в базу из файла sortable.sql, хотя можно создать самостоятельно необходимые поля – их всего два – id и listorder. Запись в таблице для данного примера будет только одна, но в реальных проектах количество таких списков может быть большим, соответственно будет увеличиваться число записей. Id –первичный ключ таблицы. Тип для listorder – varchar, но в реальной жизни при наличии списков с сотнями и тысячами элементов придется использовать текстовые типы для возможности помещения больших объемов данных в эту ячейку.
Впрочем, это лишь пример. Хранить порядок сортировки можно где угодно – в xml или текстовом файлах, для этого понадобятся небольшие изменения в коде скрипта.
Поле listorder содержит следующий текст:
|
1
|
a:7:{i:0;s:12:"Лондон";i:1;s:10:"Париж";i:2;s:15:"Нью-Йорк";i:3;s:10:"Милан";i:4;s:10:"Токио";i:5;s:16:"Мельбурн";i:6;s:6:"Рим";} |
Это массив, «упакованный» функцией serialize – она преобразует данные в строку, которую мы также легко при необходимости восстанавливаем, создавая исходный массив, для этого применяется функция unserialize.
Итак, база данных готова к использованию и подключена к проекту, продолжаем далее.
В шапку файла index.php подключаем необходимые стили и скрипты:
|
1
2
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script><script type="text/javascript" src="sortable.js"></script> |
Стили нет смысла комментировать, а скрипты – jquery и jquery UI подключаем из googleapis.
В теле index.php следующий код:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<div class="demo"><form id="itemslist"><ul><ul> <li class="ui-state-default"> <input type="text" name="items[<?php echo $i; ?>]" value="<?php echo $value; ?>" /></li></ul></ul></form><div id="response"></div></div><pre><!-- End demo --> |
Прокомментируем php-код, который генерирует элементы списка на странице.
|
1
2
3
4
5
|
include("db.php"); $query = "SELECT listorder FROM sortable"; $result = mysql_query($query) or die ($error . 'Ошибка - '.mysql_error()); $row = mysql_fetch_array($result) ; $items = unserialize($row['listorder']); |
Поключаемся к базе данных, формируем запрос, выполняем его и далее функцией unserialize распаковываем находящийся в базе массив и присваиваем его переменной $items – теперь она содержит элементы списка, который мы выводим функцией foreach.
Текст элементов заносим в input, а сам список заключаем в форму. Таким образом, мы сможем редактировать элементы.
Переходим к файлу update.php
|
1
2
3
4
5
6
7
|
<?php include("db.php");$items = serialize($_POST['items']);if ($_POST['update'] == "update") { $query = "UPDATE sortable SET listorder = '$items'"; mysql_query($query) or die($error . 'Ошибка'); echo $ok . ' Изменения сохранены'; } |
Здесь мы также выполняем подключение к базе данных, после этого в переменную $items заносим массив, который получен из переменной POST (О формировании POST-запроса ниже, в описании файла sortable.js). Предварительно преобразуем массив в строку функцией serialize.
Когда массив готов – формируем sql-запрос и заносим его в базу данных.
На очереди sortable.js
Первым делом описываем функцию update(), которая будет заносить обновленную информацию о порядке элементов списка и текст элементов:
|
1
2
3
4
5
6
7
8
|
function update(){var order = 'update=update&' + $('#itemslist').serialize();$.post("update.php", order, function(data){ $('#response').html(data).fadeIn(1000); setTimeout(function(){ $('#response').fadeOut(1000);}, 1000); }); } |
Переменная order формирует строку запроса для POST-запроса, который мы выполняем следующей строкой. Здесь также используется функция serialize, но уже из арсенала Jquery. Эта функция собирает значения полей формы и собирает их в строку запроса. В качестве селектора указываем идентификатор нашей формы. Функция внутри $.post выводит информационное сообщение об успешности или неудачности обновления и помещает его в <div id=»response»></div> . После этого запускаем таймер функцией setTimeout и скрываем сообщение через секунду.
|
1
2
3
4
5
|
$(function(){$('#response').hide();$('#sortable').sortable({ opacity: 0.8, cursor: 'move', update: function(){update();}});$('#sortable input').change( function(){update();});}); |
Первой строчкой скрываем блок, куда будут выводиться информационные сообщения.
Во второй и третьей описываем соответственно события sortable и change. Если было зафиксировано изменение порядка элементов списка – выполняем функцию update. Аналогично поступаем при изменении данных в полях нашей формы.
Посмотрите демо скрипта или скачайте исходник. Чтобы все работало, не забудьте создать базу данных (либо импортировать файл sortable.sql в уже существующую базу), а затем в файле db.php поменяйте параметры доступа к базе.
На этом, пожалуй, все. Если у вас есть какие-либо вопросы и предложения, оставляйте их в комментариях, постараюсь ответить или помочь.
Спасибо за внимание.
Источник: http://maarkus.ru/