Однажды по рабочей части мне понадобилось решить одну задачу. Операторы должны были вручную, используя веб-интерфейс, сортировать наименования определенной сезонной продукции. Проблема была в том, что продукция каждый месяц менялась, а "тематические сборки" приходилось делать каждую неделю. Раньше это выглядело так: Создавался новый список, брался перечень всей продукции, выбирались только сезонные позиции и все сохранялось. Каждую неделю все заново. Нелогичность операции была в том, что иногда сборка отличалась на одну позицию, а иногда и вовсе оставалась такой же. С этим нужно было что-то делать!

Изучив возможные варианты представления интерфейса, я выбрал наиболее подходящий для этой задачи. В этом помог мне фреймворк jQuery UI, а именно "Подключаемый список".

jsortable

Виджет имеет две колонки и позволяет перетаскивать элементы из одной колонки в другую. Кроме того, команда jQuery снабдила его богатым API, позволяющим использовать как угодно, где угодно и зачем угодно.

Для начала можно скачать с официального сайт сам фреймворк. Я немного изменил код под свои нужды, посмотрим на него:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery - сортируем продукцию / Демо</title>
<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="jquery-ui.structure.css">
<link rel="stylesheet" href="jquery-ui.theme.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="style.css">
<script>
$(function() {
$( "#sortable, #unsortable" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();


$( "#sortable" ).sortable({
update: function( event, ui ) {
var elements = $(this).find('li');
var ids = Array();
$.each(elements, function() {
ids.push($(this).attr('id'));
});
$('#display').html("INSERT INTO `table` (`id_prod`) VALUES ('" + ids.join("'), ('") + "')");
}
});
});
</script>
</head>
<body>

<ul id="sortable" class="connectedSortable selected">
<li class="ui-state-default" id="253">Товар 253</li>
<li class="ui-state-default" id="17">Товар 17</li>
<li class="ui-state-default" id="38">Товар 38</li>
</ul>

<ul id="unsortable" class="connectedSortable">
<li class="ui-state-default" id="490">Товар 490</li>
<li class="ui-state-default" id="45">Товар 45</li>
<li class="ui-state-default" id="25">Товар 25</li>
<li class="ui-state-default" id="15">Товар 15</li>
<li class="ui-state-default" id="83">Товар 83</li>
<li class="ui-state-default" id="86">Товар 86</li>
<li class="ui-state-default" id="78">Товар 78</li>
<li class="ui-state-default" id="37">Товар 37</li>
<li class="ui-state-default" id="289">Товар 289</li>
</ul>
<div id="display"></div>

</body>
</html>

Визуально все выглядит так:

Сортировка в jQuery

Ничего сложного. Мы подгружаем стили и скрипты. Потом строим две колонки. На продакшн-версии данные в колонках выводятся скриптом из базы, здесь, для простоты восприятия, мы их "захаркодили". Все просто, в самом примере вы можете перетаскивать их. Ах да, стоит подробнее расписать про этот странный кусок кода:

<script>
$(function() {
$( "#sortable, #unsortable" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();


$( "#sortable" ).sortable({
update: function( event, ui ) {
var elements = $(this).find('li');
var ids = Array();
$.each(elements, function() {
ids.push($(this).attr('id'));
});
$('#display').html("INSERT INTO `table` (`id_prod`) VALUES ('" + ids.join("'), ('") + "')");
}
});
});
</script>

Далее мы вешаем на все это метод .disableSelection(), который отключает выделение текста. Это нужно чтобы у нас сразу хватались блоки, а не выделялся текст.

Во втором блоке кода мы вешаем событие update, которое возникает когда пользователь заканчивает сортировку и позиция DOM-элемента изменилась. Событие мы повесили только на столбик #sortable, где у нас уже отсортированные элементы.

Мы объявляем две переменные, к переменной elements мы привязываем выражение $(this).find('li');, в котором получаем объект DOM-элементов, в данном случае все элементы li внутри столбика #sortable. Переменная ids будет массивом.

С помощью each пробегаем по всем элементам li и пушим значения их id в наш массив ids.

Конструкция с содержанием таких слов, как INSERT INTO, не что иное как сооружение MYSQL запроса для вставки в базу. Конечно это сделано исключительно для наглядности, MYSQL запросы через js не отправляются. По правильному нужно передать только id значения элементов li, принимающему php скрипту, который преобразует их в уже в запрос и выполнит его.

$('#display').html() вставляет HTML код в блок с id="display". Функция .join разбивает наш ids массив на части и преобразует в строку. Причем разделитель мы указали со скобками и кавычками, хотя можно указать просто запятую и вы получите список айдишников всех элементов через запятую.

Результатом выполнения скрипта будет MYSQL запрос на вставку значений в поле id_prod таблицы table.

MYSQL jQuery сортировка

Надеюсь данное решение проблемы поможет кому-нибудь еще. Если что-то не понятно - задавайте вопросы в комментариях.

Демо-версия скрипта.

(Visited 578 times, 1 visits today)