Ссылки

Поиск

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

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

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

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

Чтобы сайт планомерно развивался, бывает достаточно правильно назначить ответственного.

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 каждой строчке, как другие аналогичные решения.
Дата 2012-03-26 23:51:36

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

Вы не залогинены!

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