Вы здесь
Главная > Мой блог > WEB-разработка > Sortable – редактирование элементов и сохранение в базу данных

Sortable – редактирование элементов и сохранение в базу данных

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

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

Top