Abilita Shift-Multiselect nell'interfaccia utente jQuery selezionabile

Question

Voglio abilitare le funzionalità multiselect in una tabella selezionabile dell'interfaccia utente jQuery tenendo conto spostare.

Probabilmente dovrei fare qualcosa del genere se spostare è trattenuto su MouseClick

• Ottieni l'elemento più selezionato
• Ottieni l'elemento cliccato
• Seleziona tutti gli elementi in mezzo

Ma non riesco a trovare come farlo in modo pulito ...

Al momento l'ho ottenuto all'interno della configurazione selezionabile:

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

Così oTarget è l'elemento cliccato (e e.currentTarget è l'intero tavolo) ma ora cosa? Come posso trovare quali elementi sono già selezionati in un modo che può dirmi se l'elemento cliccato è finito o sotto quello selezionato e selezionare tutto in mezzo?

L'ho risolto ora in questo modo, aggiunto all'elemento selezionabile:

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

Ho scritto Simple Plugin per quella funzionalità. Non dipende dal plug -in selezionabile dell'interfaccia utente jQuery e per quanto ne so funziona bene.

Puoi trovare codice plug -in e semplice esempio qui: http://jsfiddle.net/bmgpc/170/

Vado a scrivere una semplice descrizione di seguito.

Uso di base:

$('ul').multiSelect();

Se si tiene "CTRL" o "Chiave di comando", è possibile selezionare/non selezionare elementi uno per uno.

UL - Genitore che tiene selezionati elementi interni.

Ci sono un numero di opzioni disponibili:

• KeepSelection - Vero | Falso - una bandiera abbastanza importante. Se impostato su true (impostazione predefinita), la selezione non verrà cancellata se si fa clic su elemento già selezionato (poiché funziona con più prop)
• multiselect - true | false -if false puoi selezionare un solo elemento
• selezionato - 'selezionato' - classe che verrà aggiunta all'elemento selezionato
• Filtro: - '> *' - Quali elementi selezioneremo
• Unselecton - False | 'Selector' - Se impostato, se fatto clic su Set Selectio verrà rimosso
• Inizio: Falso | Funzione - Caltaback all'inizio
• Stop: False | Function - Callback su Stop
• Inshelecting: False | Function - Callback se cliccato sull'opzione Imposta "Unselecton"

---

È un plug -in versione dev, quindi usa con cura

Answer 2

Puoi farlo senza plugin come questo:

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

Ecco la demo dal vivo: http://jsfiddle.net/mac2000/djfal/1/embedded/result/

Answer 3

Dopo essermi guardato intorno non sono stato in grado di trovare una soluzione a questo problema, pur usando la funzione selezionabile di JQuery UI, quindi ne ho scritto uno. Essenzialmente si attinge ai callback selezionati / non selezionati di selezione di gestire DOM State, pur onorando i callback secondo l'API selezionabile standard. Supporta il seguente caso d'uso:

• Fare clic su uno degli elementi (Maiusc+Click, CNTL+Fare clic o fare clic anche+Trascina) ovunque nell'elenco
• Maiusc+Fare clic su un altro elemento nell'elenco
• Tutti gli elementi tra i due punti finali vengono selezionati

Utilizzo per un tavolo:

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

Alcune note. (1) Attualmente supporta solo elementi di fratelli. (2) Passerà attraverso le opzioni di configurazione come vedrai nell'esempio della tabella e nei metodi selezionabili. (3) I Heart sottocore.js quindi viene usato anche se per questo non è essenziale. Sentiti libero di scambiare i suoi semplici assegni e si estende se non vuoi usare questa fantastica libreria. E no, non ho affiliazione con sottolineate.js. :)

Esempio di violino della tabella

Elenco Fiddle Esempio

Spero che questo aiuti qualcun altro! Saluti.