Ссылки

Поиск

 
Новости, Статьи
Форум
Файлы

Привет, Гость

Войти
Идентификация
Я забыл свой пароль
Регистрация

Обновления на форуме

Блок новостей в виде блога 1 >>
Игры для сайта 34 >>
Сервис создания тестов 94 >>
Дед 1 >>
На сайте регистрация пользователей спамом 3 >>

Последние статьи

Сайт для фирмы-изготовителя натяжных потолков 0
Антиспам «Я не робот» 0
За что воюет Украина и когда всё это кончится 12
Удаление родителя текущего элемента на jQuery 0
Простой аккордеон на jQuery №3 0

Система управления сайтом должна быть понятна даже секретарше, иначе для наполнения сайта придётся нанимать дорогостоящего специалиста.

RSS фиды

RSS Статьи
RSS Клиентам
RSS Новости
RSS Файлы
RSS Форум

Разделы → Статьи → Разработка сайтов → Перетаскивание строк таблицы

JQuery UI позволяет сортировать перетаскиванием определенные строчки таблицы.

Например нижеследующий код позволяет перетаскивать строки таблицы в <tbody> вверх и вниз.
Создайте файл со следующим содержанием:
Код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head> 

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<title>Sortable table</title>

<script type="text/javascript" 

src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

</script>

<script type="text/javascript" 

src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js">

</script>

<style>

#sort tr {

background:#DEE3E7;

border:0;

}

#sort th {

background:#EEC3C7;

border:0;

}</style>

</head>



 <body>

<table id="sort" cellspacing="2" cellpadding="2" 

title="Sortable table">

    <thead>

        <tr><th>№</th><th>Name</th><th>Password</th></tr>

    </thead>

    <tbody>

     <tr><td>1&nbsp;↓↑&nbsp;</td><td>Puh</td><td>wqqwe</td></tr>

     <tr><td>2&nbsp;↓↑&nbsp;</td><td>Pyatak</td><td>211122</td></tr>

     <tr><td>3&nbsp;↓↑&nbsp;</td><td>Sova</td><td>Soaasa</td></tr>

     <tr><td>4&nbsp;↓↑&nbsp;</td><td>Champion</td><td>Scxcc</td></tr>

     <tr><td>5&nbsp;↓↑&nbsp;</td><td>Tongue</td><td>werbvf</td></tr>

    </tbody>

</table>

<script type="text/javascript">

var fixHelper = function(e, ui) {

    ui.children().each(function() {

        $(this).width($(this).width());

    });

    return ui;

};

 

$("#sort tbody").sortable({

    helper: fixHelper

}).disableSelection();

</script>

</body>

</html>
Вот что должно получиться (тащите строки мышкой):
№NamePassword
1 ↓↑ Puhwqqwe
2 ↓↑ Pyatak211122
3 ↓↑ SovaSoaasa
4 ↓↑ ChampionScxcc
5 ↓↑ Tonguewerbvf


Пример в отдельном окне:
http://fromgomel.com/html/sorTable.html

Как это работает:
1. Подключаем библиотеки через сервис Гугла.
2. Подключаем сортировку с помощью кода $("#sort tbody").sortable
3. Отключаем возможность выделения с помощью .disableSelection() — для красоты; если ячейки таблицы нужно будет редактировать, не пишите этот код.
4. Последний пункт — добавляем fixHelper, исправляет изменения ширины ячеек, чтобы строка не «ломалась» при перетаскивании.

Для чего это может понадобиться?
Ну например в движке очень просто сортировать ссылки в меню:
png

Прелесть в том, что код работает под всеми популярными браузерами и не требует присваивать id каждой строчке, как другие аналогичные решения.
26.03.2012 22:51 Автор/источник: http://glebov-gin.blogspot.com/2011/04/jquery-ui-sortable-td.html

Комментировать

Вы не залогинены! Регистрация

Устал читать? Напиши! Или позвони +375 29 5344286. На связи по будним дням с 800 до 1700.