Выделение ячеек таблицы.

jQuery плагин cellSelection

На различных форумах, неоднократно помогал в решении вопроса о том, как можно реализовать выделение ячеек таблицы. На мой взгляд, задача специфическая, но раз уж за пол года такая тема мне встретилась трижды, то думаю, что ей нужно уделить внимание. Тем более, что отвечая на подобные вопросы, у меня накопилось достаточно кода, который я собрал воедино и представляю вашему вниманию в виде jQuery плагина "cellSelection"

Вкратце опишу возможности:

  1. Click - одиночное выделение ячейки. При этом, с остальных ячеек выделение снимается
  2. Click + Ctrl - одиночное выделение ячейки, но с сохранением уже выделенных ячеек
  3. Click + Shift - выделение диапазона ячеек. От первой выделенной, до той, на который был клик с зажатым Shift-ом
  4. Мышь - прямоугольная область (по образу и подобию Excel)
  5. Мышь + Ctrl + Alt - аналогично "Click + Shift", но с протяжкой мышью
  6. Данные ячеек - возможность получить из выделенных ячеек их текстовое содержание (по умолчанию), 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;
}


Пользуемся, тестируем и не забываем писать в коментариях о найденых ошибках или багах.

Incode Pro logo

13 комментариев

Allusik 15.04.2016 21:17
Ох, как вы вовремя! )) Прям мысли мои прочитали. Спасибо большое!
Гость 07.07.2016 11:35
Да, штука нужная, не хватает событий...если можно запилите на гитхаб, думаю найдутся желающие доработать\потестировать.
Гость 24.07.2016 12:13
Классная вещь! А можно сделать, чтобы при одиночном выделении, с остальных ячеек не снималось выделение? т.е. без CTRL?
Incode 24.07.2016 14:25
при одиночном выделении, с остальных ячеек не снималось выделение
Так чтобы по-быстрому - откройте "cellSelection.min.js", в нём через поиск (Ctrl+F) найдите "mousedown:function(a){" и сразу после фигурной скобки "{", допишите "a.ctrlKey=1;"
Гость 03.04.2017 12:14
Отличный плагин! Я организую с помощью него учет листового материала) жаль что тач не прописан..
Гость 06.04.2017 20:51
а можно подсчитывать количество выделяемых ячеек?
Incode 16.01.2018 14:57
количество выделяемых ячеек
Есть метод для получения массива выделенных ячеек. Думаю, что посчитать размер массива - уже не составит труда.
Гость 16.02.2018 16:48
Спасибо за очень полезную штуку!

Вопрос: как можно не снимать выделение с ячеек при правом клике?
Incode 16.02.2018 18:43
как можно не снимать выделение с ячеек при правом клике?
Досконально не проверял, добавил на скорую руку. Забирайте
Гость 19.02.2018 09:56
Добавил -
mousedown: function(a) {
a.preventDefault(); // чтобы не выделялось содержимое <span></span>
if(a.which === 3) return false; //чтобы не снимать выделение с ячеек при правом клике

Большое спасибо за быстрое решение!
Хорошей недели!
С уважением,
Юрий
Гость 19.02.2018 20:38
ошибка в описании cellsSelection
Гость 21.02.2018 15:35
Здравсвуйте!
При выделенном диапазоне, (Ctrl+left click) можно выделить только оду ячейку надо кликать по одной). Как сделать возможным выделить следующий диапазон(несколько ячеек сразу)?
Гость 12.03.2018 16:33
а можно чтобы стрелки вверх, вниз и остальные не блокировались плагином?
используется другая библиотека в которой обрабатывается эти события и она вместе с плагином не работает!
Ваш комментарий:
X