
В этой статье расскажу о модификации функции 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/