Поиск

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

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

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

На нашем сайте для вебмастера работает сервис создания тестов.

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

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(eui) {
    
ui.children().each(function() {
        $(
this).width($(this).width());
    });
    return 
ui;
};
 
$(
"#sort tbody").sortable({
    
helperfixHelper
}).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.