На различных форумах, неоднократно помогал в решении вопроса о том, как можно реализовать выделение ячеек таблицы. На мой взгляд, задача специфическая, но раз уж за пол года такая тема мне встретилась трижды, то думаю, что ей нужно уделить внимание. Тем более, что отвечая на подобные вопросы, у меня накопилось достаточно кода, который я собрал воедино и представляю вашему вниманию в виде jQuery плагина "cellSelection"
Вкратце опишу возможности:
- Click - одиночное выделение ячейки. При этом, с остальных ячеек выделение снимается
- Click + Ctrl - одиночное выделение ячейки, но с сохранением уже выделенных ячеек
- Click + Shift - выделение диапазона ячеек. От первой выделенной, до той, на который был клик с зажатым Shift-ом
- Мышь - прямоугольная область (по образу и подобию Excel)
- Мышь + Ctrl + Alt - аналогично "Click + Shift", но с протяжкой мышью
- Данные ячеек - возможность получить из выделенных ячеек их текстовое содержание (по умолчанию), html-код или данные data-атрибутов
Использование:
<script src="js/jquery.min.js"></script>
<script src="js/cellSelection.min.js"></script>
<script>
$(function(){
// С параметрами по умолчанию
$('.my-table').cellSelection();
// С доп. параметрами
$('.my-table').cellSelection({
selectClass: 'my-class', // имя своего класса для стилизации выделяемый ячеек. По умолчанию "jq-cell-selected"
ignoreCell: 'selector' // селектор игнорируемых ячеек (id, класс, атрибут etc.) По умолчанию - нет
});
});
</script>Методы:
var cs = $('.my-table').cellSelection();
// выделить все ячейки
cs.cellsSelection('selectAll');
// снять выделение со всех ячеек
cs.cellsSelection('deselect');
// получить данные выделенных ячеек в виде массива
var arr = cs.cellsSelection('getArray'); // текстовое содержание
var arr = cs.cellsSelection('getArray', 'html'); // внутренний html-код ячеек
var arr = cs.cellsSelection('getArray', 'data'); // данные data-атрибутов
// аналогично с данными в формате JSON
var json = cs.cellsSelection('getJson');
var json = cs.cellsSelection('getJson', 'html');
var json = cs.cellsSelection('getJson', 'data');Как я описывал выше, класс для выделения ячеек называется "jq-cell-selected". Поэтому, можно использовать его или свой класс, но тогда не забыть внести его в параметр selectClass при инициализации. Какой должен быть стиль у выделенных ячеек - это уже на ваш вкус и усмотрение. В примере я использовал следующие стили:
.my-table td {
background: #4b75a4 !important;
color: #ffffff;
}Если для ячеек назначены какие-то еще классы или стили, то проследите, чтобы они не перекрывают свойства "background" и "color" в классе для выделения. Для перестраховки, к этим свойствам можно добавить значение !important, как я показал выше. Кроме остальных стилей, для ячеек рекомендую добавить свойство "user-select", не забыв про вендорные префиксы:
.my-table td {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}Пользуемся, тестируем и не забываем писать в коментариях о найденых ошибках или багах.
