Включить Shift-Multiselect в jQuery UI Выбор - PullRequest
Новая
       29

Включить Shift-Multiselect в jQuery UI Выбор

23 голосов
/ 21 февраля 2012

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

Я, вероятно, должен сделать что-то подобное, если shift удерживается нажатой мышью

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

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

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

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

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

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

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(...)

Ответы [ 3 ]

27 голосов
/ 23 января 2013

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

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/

13 голосов
/ 21 февраля 2012

Я написал простой плагин для этой функциональности. Это не зависит от jQuery UI Selectable плагин и, насколько я знаю, прекрасно работает с ним.

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

Собираюсь написать простое описание ниже.

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

$('ul').multiSelect();

Если вы удерживаете «Ctrl» или «Командную клавишу», вы можете выбирать / отменять выбор элементов один за другим.

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

Есть несколько доступных вариантов:

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

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

5 голосов
/ 19 сентября 2012

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

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

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

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

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

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

пример списка скрипты

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

...