javascript - examples - Habilitar Shift-Multiselect en jQuery UI seleccionable

jquery ui sortable

Question

Quiero habilitar las funciones de selección múltiple en una tabla jQuery UI seleccionable manteniendo presionado shift .

Probablemente debería hacer algo como esto si shift se mantiene presionada sobre el mouseclick

• Obtener el elemento seleccionado más alto
• Obtener elemento cliqueado
• Seleccionar todos los elementos intermedios

pero no puedo encontrar cómo hacerlo de una manera limpia ...

En este momento lo tengo dentro de la configuración seleccionable:

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

Entonces, oTarget es el elemento e.currentTarget (y e.currentTarget es la tabla completa), pero ¿ahora qué? ¿Cómo puedo encontrar qué elementos ya están seleccionados de una manera que pueda decirme si el elemento cliqueado está por encima o por debajo de los seleccionados y seleccionar todo en el medio?

Lo he resuelto ahora así, agregado al elemento seleccionable:

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

Después de mirar a mi alrededor, no pude encontrar una solución a este problema mientras seguía usando la función de Selección de JQuery UI, así que escribí una. Básicamente, aprovecha las devoluciones de llamada seleccionables o no seleccionadas de Selectable para administrar el estado de DOM a la vez que respeta las devoluciones de llamada según la API seleccionable estándar. Es compatible con el siguiente caso de uso:

• Haga clic en uno de los elementos (shift + clic, cntl + clic, o haga clic + arrastrar también) en cualquier lugar de la lista
• Shift + clic en otro elemento en la lista
• Todos los elementos entre más los dos puntos finales se seleccionan

Uso para una mesa:

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

Algunas notas (1) Actualmente solo es compatible con elementos hermanos. (2) Pasará por las opciones de configuración, como verá en el ejemplo de la tabla, así como en los métodos seleccionables. (3) I heart underscore.js por lo que se usa aunque para esto no es esencial. Siéntase libre de cambiar sus controles simples y se extiende si no desea utilizar esta biblioteca impresionante. Y no, no tengo ninguna afiliación con underscore.js. :)

ejemplo de violín de mesa

lista ejemplo de violín

¡Espero que esto ayude a alguien más! Aclamaciones.

Answer 2

Escribí un plugin simple para esa funcionalidad. No depende del plugin jQuery ui seleccionable y, por lo que sé, funciona bien con él.

Puede encontrar el código de complemento y un ejemplo simple aquí: http://jsfiddle.net/bMgpc/170/

Voy a escribir una descripción simple a continuación.

Uso básico:

$(''ul'').multiSelect();

Si mantiene presionada la tecla "Ctrl" o "Command Key", puede seleccionar / deseleccionar elementos uno por uno.

ul - parent que contiene elementos internos para ser seleccionados.

Hay varias opciones disponibles:

• keepSelection - true | false - una bandera bastante importante. Si se establece en verdadero (valor predeterminado), la selección no se borrará si hace clic en el elemento ya seleccionado (ya que funciona con múltiples apoyos)
• multiselect - true | false -if false puede seleccionar solo un elemento
• seleccionada - ''seleccionada'' - clase que se agregará al elemento seleccionado
• filter: - ''> *'' - qué elementos vamos a seleccionar
• unselectOn - false | ''selector'' - si se establece, si se hace clic en set selector selectio se eliminará
• start: false | function - callback al inicio
• stop: función | falsa - devolución de llamada en la parada
• deseleccionar: función | falsa - devolución de llamada cuando se hace clic en la opción "unselectOn"

Es un complemento de versión dev, por lo que debe usarse con cuidado

Answer 3

Puedes hacerlo sin complementos como este:

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

Aquí está la demostración en vivo: http://jsfiddle.net/mac2000/DJFaL/1/embedded/result/