Activer Shift-Multiselect dans jQuery UI sélectionnable

Question

Je souhaite activer les fonctionnalités de sélection multiple dans une table sélectionnable de l'interface utilisateur jQuery en maintenant shift .

Je devrais probablement faire quelque chose comme ça si shift est maintenu enfoncé sur un clic de souris

• Obtenir l'élément sélectionné le plus haut
• Obtenir l'élément cliqué
• Sélectionnez tous les éléments intermédiaires

mais je ne trouve pas comment faire cela de manière propre ...

Pour le moment, je l'ai dans la configuration sélectionnable:

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

Donc, oTarget est l'élément cliqué (et e.currentTarget est la table entière) mais que faire maintenant?Comment puis-je trouver les éléments déjà sélectionnés d'une manière qui puisse me dire si l'élément sur lequel vous avez cliqué est au-dessus ou en dessous de ceux sélectionnés et sélectionner tout ce qui se trouve entre les deux?

Je l'ai résolu maintenant comme ceci, ajouté à l'élément sélectionnable:

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

Answer 1

J'ai écrit un plugin simple pour cette fonctionnalité. Il ne dépend pas du plugin jQuery ui Selectable et, pour autant que je sache, fonctionne très bien avec lui.

Vous pouvez trouver le code du plugin et un exemple simple ici: http://jsfiddle.net/bMgpc/170/

Je vais écrire une description simple ci-dessous.

Utilisation de base:

$('ul').multiSelect();

Si vous maintenez "Ctrl" ou "Commande", vous pouvez sélectionner / désélectionner des éléments un par un.

ul - parent qui contient les éléments internes à sélectionner.

Plusieurs options sont disponibles:

• keepSelection - true | false - un indicateur assez important. Si défini sur true (par défaut), la sélection ne sera pas effacée si vous cliquez sur un élément déjà sélectionné (car il fonctionne avec plusieurs accessoires)
• sélection multiple - vrai | faux -si faux, vous ne pouvez sélectionner qu'un seul élément
• selected - 'selected' - classe qui sera ajoutée à l'élément sélectionné
• filtre: - '> *' - quels éléments allons-nous sélectionner
• unselectOn - false | 'selector' - si défini, alors si on clique sur set selector selectio serait supprimé
• start: false | function - rappel au démarrage
• stop: false | function - rappel à l'arrêt
• désélection: false | function - rappel quand on clique sur définir l'option "unselectOn"

---

C'est un plugin de version de développement, donc à utiliser avec précaution

Answer 2

Vous pouvez le faire sans plugins comme celui-ci:

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
        }
    }
});

Voici une démo en direct: http://jsfiddle.net/mac2000/DJFaL/1 / intégré / résultat /

Answer 3

Après avoir regardé autour de moi, je n'ai pas pu trouver de solution à ce problème tout en utilisant la fonction sélectionnable de jQuery UI, alors j'en ai écrit une. Essentiellement, il exploite les rappels sélectionnés / non sélectionnés de Selectable pour gérer l'état DOM tout en respectant les rappels selon l'API Selectable standard. Il prend en charge le cas d'utilisation suivant:

• Cliquez sur l'un des éléments (Maj + clic, cntl + clic ou cliquez + glisser également) n'importe où dans la liste
• Maj + clic sur un autre élément de la liste
• Tous les éléments situés entre plus les deux extrémités sont sélectionnés

Utilisation pour une table:

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

Quelques notes. (1) Il ne prend actuellement en charge que les éléments frères. (2) Il passera par les options de configuration comme vous le verrez dans l'exemple de tableau ainsi que les méthodes sélectionnables. (3) I heart underscore.js donc il est utilisé même si pour cela ce n'est pas indispensable. N'hésitez pas à échanger ses vérifications simples et étend si vous ne voulez pas utiliser cette bibliothèque géniale. Et non, je n'ai aucune affiliation avec underscore.js. :)

exemple de violon de table

exemple de violon de liste

J'espère que cela aide quelqu'un d'autre! Bravo.