Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail


Ответ
 
Опции темы
Старый 16.12.2012, 16:24   #1
StIX-S
Пользователь
 
Регистрация: 24.06.2011
Сообщений: 69
По умолчанию Выделение строк таблицы как в проводнике виндовс.

Всем доброго времени суток! Есть такая задача: Реализовать выделение строк таблицы как в проводнике виндовс, т.е удерживая [Ctrl] можно добавлять к выделению элементы, а удерживая [Shift] нужно выделить всё, что между первым выделеным элементом и конечным. Одиночное выделение и мульти-выделение с ctrl сделал, а как с shift пока не знаю. Подскажите пожалуйста, как это можно реализовать, как найти все элементы между последним кликом по строке таблицы и предпоследним?

Выделение реализовано добавлением класса 'selected'. Использую JQuery.
Код:
$(document).ready(function(e) {
	$("tr[id]").click(function(e) {
		if (e.ctrlKey) {
			$(this).toggleClass("selected");
		} else {
			$("tr").removeAttr("class");
			$(this).addClass("selected");
		}
	});
});
Структура таблицы:
Код HTML:
<table border="0" cellpadding="0" cellspacing="1" width="100%">
	<tr>
		<th>#</th>
		<th>Name</th>
		<th>Register date</th>
	</tr>
	<tr id="1">
		<td>1</td>
		<td>admin</td>
		<td>10/10/2012</td>
	</tr>
	<tr id="2">
		<td>2</td>
		<td>vasa</td>
		<td>15/10/2012</td>
	</tr>
	<tr id="3">
		<td>3</td>
		<td>yura</td>
		<td>17/10/2012</td>
	</tr>
</table>

Последний раз редактировалось StIX-S; 16.12.2012 в 16:32.
StIX-S вне форума Ответить с цитированием
Старый 16.12.2012, 20:03   #2
LZero
Форумчанин
 
Регистрация: 20.07.2012
Сообщений: 129
По умолчанию

Первое, что на ум пришло:
PHP код:
$(function () {
    $(
'#table tr').click(function (e) {
        if (
e.shiftKey && $('#table').data('idx')) {
            var 
tmp = $(this).index();
            $(
'#table tr').slice(Math.min($('#table').data('idx'), tmp), Math.max($('#table').data('idx'), tmp)+1).addClass('selected');
            return 
false;
        }

        if (
e.ctrlKey) {
            $(
this).toggleClass("selected");
            return 
false;
        }

        $(
'#table tr').removeClass('selected');
        $(
this).addClass('selected');
        $(
'#table').data('idx', $(this).index());
    });
}); 
Тут к таблице добавить id="table"
LZero вне форума Ответить с цитированием
Старый 16.12.2012, 21:20   #3
StIX-S
Пользователь
 
Регистрация: 24.06.2011
Сообщений: 69
По умолчанию

Большое спасибо, всё работает) Только если первый клик сделан на 1 строке таблицы условие if (e.shiftKey && $('#table').data('idx')) не будет выполнено, так как $('#table').data('idx') возвратит нулевой индекс.
StIX-S вне форума Ответить с цитированием
Старый 16.12.2012, 22:10   #4
LZero
Форумчанин
 
Регистрация: 20.07.2012
Сообщений: 129
По умолчанию

Да, это я не учел. Там можно заменить на
Код:
if (e.shiftKey && $('#table').data('idx') !== undefined)
LZero вне форума Ответить с цитированием
Старый 16.12.2012, 22:32   #5
StIX-S
Пользователь
 
Регистрация: 24.06.2011
Сообщений: 69
По умолчанию

Спасибо ещё раз, к сожалению 2 раза подряд плюсовать нельзя(
StIX-S вне форума Ответить с цитированием
Ответ

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как узнать какая иконка отображается в проводнике? dolphin705 Общие вопросы Delphi 5 05.05.2012 20:47
Как прописать относительное выделение строк? Ogeris Microsoft Office Excel 4 27.10.2010 11:31
создание подстроки как в проводнике Windows Danilka Общие вопросы Delphi 3 26.05.2010 18:55
Выделение цветом нужных строк таблицы DBGrid XFilippowX Общие вопросы Delphi 4 16.02.2009 11:02
Дерево как в проводнике, реестре Valdis Общие вопросы Delphi 1 04.10.2007 00:02


Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru
Пеллетный котёл Emtas
котлы EMTAS