Плагин для javascript- библиотеки jQuery, о котором пойдет речь в этой статье, позволит пользователю «вручную» сортировать строки таблицы с помощью технологии drag-and-drop.

Для начала посмотрите небольшой пример, а потом будем разбирать, как это работает.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

Для начала нам потребуется подключить к странице два файла – библиотеку jQuery и файл jquery.tablednd.js. Сделаем это в разделе HEAD.

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.tablednd.js"></script>

Что касается стилевого оформления таблицы – здесь Вы вольны творить как угодно. В HTML-коде также ничего особенного – совершенно обычная таблица. Замечу только, что все строки таблицы (элементы tr) должны иметь атрибут id, т.е. содержать идентификатор. Ну и конечно мы должны будем иметь возможность обратиться к конкретной таблице, поэтому атрибут id должна иметь и сама таблица.

В принципе мы могли бы обращаться к таблице и по имени класса, но лучше все-таки использовать именно id – спокойнее как-то.

В самом простом варианте сделать строки перемещаемыми в таблице можно вот так:

<script type="text/javascript">
$(document).ready(function() {
    $("#table-1").tableDnD();
});
</script>

Т.е. по сути одной строкой! Все остальное – «обертка», которая отслеживаем момент готовности объектной модели документа (DOM). Но это не было бы так интересно, если бы мы не имели возможности использовать какие-либо дополнительные параметры. К счастью такая возможность есть. Я приведу список доступных опций, поясняя некоторые из них строками кода.
onDragClass – определяет имя класса, который добавляется во время перемещения строки и будет удален после того, как строка будет drop, сброшена. Вот как это выглядит в коде:

$("#table-1").tableDnD({
  onDragClass: "dragRow"
});

Для назначения стилей при перемещении строки возможно также использование опции onDragStyle, но onDragClass представляется более гибким для применения, поскольку при использовании onDragStyle, назначенные стили могут быть унаследованы например ячейками строки или другим содержимым, что не всегда приемлемо.
onDropStyle – составляет как бы пару для onDragStyle и содержит конечно же имя класса, который будет применен в момент операции drop.
onDragStart – содержит функцию, которая будет вызвана в момент начала перемещения строки. Функция принимает два параметра – таблицу и строку, которую пользователь начал перемещать.

onDragStart: function(table, row) {
    $("#messageArea").html("Перемещаем строку " + row.id);
}

onDrop – содержит функцию, которая будет вызвана в момент, когда строка «сброшена». Функция принимает два параметра – таблицу и строку, которую пользователь «сбросил». Новый порядок расположения строк можно получить, используя table.tBodies[0].rows.

Именно в onDrop я добавил пару строк кода, что бы «сброшенная» строка немного «моргнула» (правда не могу разобраться, почему-то «моргает»она только в FireFox – странно…) – все это Вы сможете увидеть в исходном коде.

В качестве содержимого ячеек вполне могут быть использованы элементы input или select. Правда здесь необходимо отметить, что присутствуют некоторые проблемы с использованием radio и checkbox в IE6. При перемещении строки эти элементы не сохраняют значение, если оно было определено.

Что еще? Ну разве можно сказать, что какие-то строки в таблице можно сделать неперемещаемыми. Для этого элементу tr необходимо добавить атрибут noDrag со значением true.

Вот теперь наверное совсем все.

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal