Сортировка "на лету" (jQuery + PHP)

Расскажу-ка я вам, как сделать пересортировку списка "на лету".

Многие CMS оперируют такой штукой, как индекс упорядочивания. Скажем, в "Битриксе", чтобы изменить сортировку в списке, нужно открыть на редактирование каждый пункт списка, и поставить соответствующее число. То есть, чтобы переместить страницу "вверх" в списке, надо сделать несколько действий, да к тому же знать, какое число надо поставить, чтобы страница оказалась в нужном месте. Я считаю, это неправильно. Надо, чтоб пользователь мог перетащить строку мышкой в нужное место, и "бросить". При современных мощностях это делается чертовски просто.

Для реализации механизма нам понадобятся:

1. JQuery; открытый JavaScript-фреймворк
2. JQuery UI; jQuery-библиотека, содержащая нужный набор инструментов для реализации "перетаскивания" пунктов списка
3. Один PHP-скрипт и один JS-скрипт
4. Сам список, собственно

JQuery и jQuery UI можно "подшить" с помощью Google. Напишите в начале страницы (в области HEAD):

<script type="text/javascript" src="http://google.com/jsapi"></script>

<script type="text/javascript">google.load("jquery", "1.4.2")</script>

<script type="text/javascript">google.load("jqueryui", "1")</script>

Таким образом будут "подшиты" jQuery версии 1.4.2 и jQuery UI версии 1. Для реализации сортировки "с лица" этого достаточно. Давайте ее сделаем.

Предположим, нужный список -- это таблица с идентификатором my-list. У каждой строки таблицы (tr) есть параметр, который называется, скажем, unitId. Это -- уникальный идентификатор наших сортируемых страниц из базы. Вот так оно выглядит:

<tr unitId="77">...</tr>

Пишем под таблицей такой скрипт:

<script type="text/javascript">

$(document).ready(function(){

    $("#my-list").sortable({

        items: 'tr',

        handle: 'td',

        stop: function(event,ui){sortList();}

    });

});

</script>

Все. Теперь наш список сортируется при перетаскивании мышкой. Но результат пока не сохраняется, и будет утерян при обновлении страницы. Для того, чтобы закреплять результат, пишем функцию sortList():

<script type="text/javascript">

function sortList(){

    var ids = [];

    $("#my-list tr").each(function(){ ids[ids.length] = $(this).attr('unitId'); });

    $.ajax({

        type: 'POST',

        dataType: 'text',

        url: 'listSorter.php',

        data: ({ ids: ids.join() })

    });

}

</script>

В этом скрипте мы:

1. Собрали идентификаторы в нужной последовательности. Т.е. прошли по списку и поместили все идентификаторы в массив ids.
2. Сделали из массива строку, разделив идентификаторы в ней с помощью запятой
3. Отправили полученное через POST-запрос скрипту listSorter.php

Все, возня с JS закончена. Теперь осталось сделать, собственно, срипт listSorter.php, в котором результаты сортировки будут помещены в базу.

Предположим, в базе у каждой строки есть тот самый индекс сортировки, и называется он, например, order. Это число, используемое при выборке ("select * from `my_table` order by `order`"). Таким образом, нам надо переписать эти значения под новый порядок сортировки.

Скрипту listSorter.php в $_POST отдается строка ids.

Значит, нам надо:

1. Взять строку $_POST['ids'] и разбить ее по запятым
2. Пройтись по полученному массиву циклом и update-нуть в этом порядке поля order в базе

Примерно так:

foreach( explode(',' , $_POST['ids']) as $n => $id )

mysql_query("update `my_table` set `order`=$n where `id`=$id");

Вот и все, сортировка работает. Теперь осталось только учесть настройки безопасности, навести лоск и т.п. Но это уже -- на ваш вкус.