').append($label));
);
);
);
);
CSS
/* Styles for the drop-down. Feel free to change the styles to suit your website. :-) */
.cb-dropdown-wrap
max-height: 80px; /* At most, around 3/4 visible items. */
position: relative;
height: 19px;
.cb-dropdown,
.cb-dropdown li
margin: 0;
padding: 0;
list-style: none;
.cb-dropdown
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
border: 1px solid #888;
/* For selected filter. */
.active .cb-dropdown
background: pink;
.cb-dropdown-wrap:hover .cb-dropdown
height: 80px;
overflow: auto;
transition: 0.2s height ease-in-out;
/* For selected items. */
.cb-dropdown li.active
background: #ff0;
.cb-dropdown li label
display: block;
position: relative;
cursor: pointer;
line-height: 19px; /* Match height of .cb-dropdown-wrap */
.cb-dropdown li label > input
position: absolute;
right: 0;
top: 0;
width: 16px;
.cb-dropdown li label > span
display: block;
margin-left: 3px;
margin-right: 20px; /* At least, width of the checkbox. */
font-family: sans-serif;
font-size: 0.8em;
font-weight: normal;
text-align: left;
/* This fixes the vertical aligning of the sorting icon. */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled
background-position: 100% 10px;
Manifestación
https://jsfiddle.net/41vgefnf/1/ https://jsfiddle.net/41vgefnf/6/ https://jsfiddle.net/41vgefnf/8/ https://jsfiddle.net/41vgefnf/9/
https://jsfiddle.net/41vgefnf/10/
ACTUALIZAR
Moví los menús desplegables de filtro al encabezado y diseñé los menús desplegables para que se parecieran más a menús desplegables. (No JS o jQuery involucrados en la funcionalidad desplegable ; solo CSS puro con animación básica – CSS3 transition.)
ACTUALIZACIÓN # 2
Lo siento, olvidé aplicar el CSS “activo” class a los elementos seleccionados.
ACTUALIZACIÓN # 3
Igual que Actualización n. ° 2 caso, pero para el envoltorio del menú desplegable. (Perdón por seguir olvidándome de cosas … y edité solo para cumplir / cumplir con los requisitos / cambios que realmente solicitaste. 🙂 Pero creo que esta actualización sería la revisión final. )
ACTUALIZACIÓN # 4
Se corrigió el “activo” cambio de estado del contenedor del menú desplegable.
CREDITOS
Gracias @Giacomo por tu violín. =)
Creo que lo que está buscando en términos de interfaz de usuario es una selección múltiple.
En realidad, no existe un elemento desplegable con selección múltiple usando una casilla de verificación (la selección múltiple ya existe para ese tipo de necesidad de interacción).
Creo que necesita una selección múltiple personalizada con una mejor experiencia de usuario (no la predeterminada como en el ejemplo proporcionado).
Aquí hay un violín con mi propósito, entiendo que esto no es exactamente lo que estaba pidiendo, pero creo que esto se adaptará a su solicitud en un nivel más abstracto.
Todo lo que hice fue usar un complemento de jquery llamado select2, muy útil para mejorar ux y ui en varios elementos de entrada.
Consulte los comentarios del código para conocer los aspectos técnicos.
https://jsfiddle.net/p1261jby/3/
/*added as resources
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css
*/
$(document).ready(function()
$('#example').DataTable(
initComplete: function()
this.api().columns().every(function()
var column = this;
//added class "mymsel"
var select = $('' + d + ' ')
);
);
//select2 init for .mymsel class
$(".mymsel").select2();
);
);
Aquí están los documentos de Select2 en caso de que necesite personalizar algunos parámetros. https://select2.org/selections
Aquí hay otro sabor. Está usando código modificado de Elmahdi Mahmoud para la selección múltiple, así que lo dejé en su mensaje de derechos de autor del MIT.
Te lo advierto ahora, el código no es bonito, pero el resultado es efectivo, así que pensé que valía la pena agregarlo al montón de opciones. Un violín en vivo está aquí.
El JS es
/* Plugin API method to determine is a column is sortable */
$.fn.dataTable.Api.register('column().searchable()', function()
var ctx = this.context[0];
return ctx.aoColumns[this[0]].bSearchable;
);
$(document).ready(function()
// Create the DataTable
var table = $('#example').DataTable(
fixedHeader: true,
pageLength: 25,
orderCellsTop: true,
columnDefs: [
searchable: false,
targets: [0, 4]
],
);
// Add filtering
table.columns().every(function()
if (this.searchable())
var that = this;
var myList = $('');
var myMulti = $('
');
myList.appendTo(myMulti);
var myDd = $('Select
' + title + ' ';
$('.multiSel').append(html);
$(".hida").hide();
else
$('span[title="' + title + '"]').remove();
var ret = $(".hida");
$('.dropdown dt a').append(ret);
);
);
Recuerda algo, que tienes la opción de explicar si encontraste tu disgusto justo a tiempo.
¡Haz clic para puntuar esta entrada!
Utiliza Nuestro Buscador
