Включить Shift-Multiselect в пользовательском интерфейсе jQuery

Я хочу включить многозадачность в таблице выбора jQuery UI, удерживая shift.

Я, вероятно, должен сделать что-то подобное, если shift удерживается на mouseclick

  • Получить самый верхний выбранный элемент
  • Получить элемент clicked
  • Выберите все элементы между

но я не могу найти, как это сделать чистым способом...

В данный момент я получил это внутри выбираемой конфигурации:

start: function(e)
        {
            var oTarget = jQuery(e.target);
            if(!oTarget.is('tr')) oTarget = oTarget.parents('tr');
        }

Итак, oTarget - это элемент с щелчком (и e.currentTarget - вся таблица), но что теперь? Как я могу найти, какие элементы уже выбраны таким образом, который может сказать мне, если элемент clicked находится над или ниже выбранных, и выберите все между ними?

Я решил это сейчас, добавив к выбираемому элементу:

jQuery(table).mousedown(function(e)
    {
        //Enable multiselect with shift key
        if(e.shiftKey)
        {
            var oTarget = jQuery(e.target);
            if(!oTarget.is('.ui-selectee')) oTarget = oTarget.parents('.ui-selectee');

            var iNew = jQuery(e.currentTarget).find('.ui-selectee').index(oTarget);
            var iCurrent = jQuery(e.currentTarget).find('.ui-selectee').index(jQuery(e.currentTarget).find('.ui-selected'));

            if (iCurrent < iNew) {
                iHold = iNew;
                iNew = iCurrent;
                iCurrent = iHold;
            }

            if(iNew != '-1')
            {
                jQuery(e.currentTarget).find('.ui-selected').removeClass('ui-selected');
                for (i=iNew;i<=iCurrent;i++) {
                    jQuery(e.currentTarget).find('.ui-selectee').eq(i).addClass('ui-selected');
                }
                e.stopImmediatePropagation();
                e.stopPropagation();
                e.preventDefault();
                return false;
            }
        }
    }).selectable(...)

Ответы

Ответ 1

Я написал простой плагин для этой функции. Он не зависит от jQuery ui Выбираемый плагин, и насколько я знаю, он отлично работает с ним.

Здесь вы можете найти код плагина и простой пример: http://jsfiddle.net/bMgpc/170/

Перейдем к описанию простого описания ниже.

Основное использование:

$('ul').multiSelect();

Если вы удерживаете "Ctrl" или "Command Key", вы можете выбрать/отменить выбор по одному.

ul - родительский элемент, который содержит выбранные внутренние элементы.

Существует несколько вариантов:

  • keepSelection - true | false - довольно важный флаг. Если установлено значение true (по умолчанию), выбор не будет очищен, если вы нажмете на уже выбранный элемент (поскольку он работает с несколькими опорами)
  • multiselect - true | false -if false вы можете выбрать только один элемент
  • selected - 'selected' - класс, который будет добавлен к выбранному элементу
  • filter: - ' > *' - какие элементы мы собираемся выбрать
  • unselectOn - false | 'selector' - если установлено, то если щелкнуть по селектору селектора выбора будет удален
  • start: false | function - обратный вызов при запуске
  • stop: false | function - обратный вызов при остановке
  • unselecting: false | function - обратный вызов при нажатии на опцию "unselectOn"

Это плагин для версии dev, поэтому используйте с осторожностью

Ответ 2

Вы можете сделать это без плагинов:

var prev = -1; // here we will store index of previous selection
$('tbody').selectable({
    selecting: function(e, ui) { // on select
        var curr = $(ui.selecting.tagName, e.target).index(ui.selecting); // get selecting item index
        if(e.shiftKey && prev > -1) { // if shift key was pressed and there is previous - select them all
            $(ui.selecting.tagName, e.target).slice(Math.min(prev, curr), 1 + Math.max(prev, curr)).addClass('ui-selected');
            prev = -1; // and reset prev
        } else {
            prev = curr; // othervise just save prev
        }
    }
});

Вот живая демонстрация: http://jsfiddle.net/mac2000/DJFaL/1/embedded/result/

Ответ 3

После осмотра я не смог найти решение этой проблемы при использовании функции jQuery UI Selectable, поэтому я написал ее. По сути, он вписывается в выбранные/невыбранные обратные вызовы Selectable для управления состоянием DOM, все еще соблюдая обратные вызовы согласно стандарту Selectable API. Он поддерживает следующий прецедент:

  • Нажмите один из элементов (сдвиг + клик, cntl + клик или нажмите + перетащите также) в любом месте списка
  • Shift + щелкните другой элемент в списке
  • Все элементы между плюсми двумя конечными точками становятся выбраны

Использование таблицы:

$('table').shiftSelectable({filter: 'tr'});

Несколько заметок. (1) В настоящее время он поддерживает только элементы сиблинга. (2) Он будет проходить через параметры конфигурации, как вы увидите в примере таблицы, а также в методах выбора. (3) Я сердце underscore.js, поэтому оно используется, хотя для этого это не существенно. Не стесняйтесь менять свои простые проверки и расширяться, если вы не хотите использовать эту замечательную библиотеку. И нет, у меня нет связи с underscore.js.:)

пример таблицы скриптов

список скриптов

Надеюсь, это поможет кому-то еще! Приветствия.