El Post describe el código en JavaScript para realizar el intercambio de datos entre 2 listas.
Intercambio de datos entre dos listas
Consta de cuatro botones, los cuales tienen las siguientes funciones, de acuerdo a su posición:
- Pasa todo el contenido de la lista izquierda a la lista derecha. Ordena la lista destino.
- Pasa los registros seleccionados de la lista derecha a la lista izquierda. Ordena la lista destino.
- Pasa los registros seleccionados de la lista izquierda a la lista derecha. Ordena la lista destino.
- Pasa todo el contenido de la lista derecha a la lista izquierda. Ordena la lista destino.
El funcionamiento de los 4 botones es similar por lo tanto solo explicare el primero.
$("#agregar").click(function() {
$("#selectGrupos option:selected").each(function(i){
var $x = $("select#selectResult");
var tot = $("#selectResult option").length;
var y = $x.get(0)
y.options[tot] = new Option;
y.options[tot].text = $(this).text();
y.options[tot].value = tot;
}).remove(); ordenarCombos2();});
Linea 1. Se ejecuta al hacer clic al botón correspondiente.
Linea 2. Selecciona los datos habilitados de la lista original -o todos si no tiene la instrucción selected–
Lineas 3 a 8. Obtiene la longitud de la lista destino y agrega los datos habilitados a la lista destino.
Linea 9. Remueve los datos habilitados de la lista origen. Ejecuta la función ordenarCombos2, la cual ordena los datos de la lista destino.
El siguiente recuadro muestra el script completo.
$(document).ready(function(){
$("#agregar").click(function() {
$("#selectGrupos option:selected").each(function(i){
var $x = $("select#selectResult");
var tot = $("#selectResult option").length;
var y = $x.get(0)
y.options[tot] = new Option;
y.options[tot].text = $(this).text();
y.options[tot].value = tot;
}).remove(); ordenarCombos2();});
$("#agregarTodo").click(function() {
$("#selectGrupos option").each(function(i){
var $x = $("select#selectResult");
var tot = $("#selectResult option").length;
var y = $x.get(0)
y.options[tot] = new Option;
y.options[tot].text = $(this).text();
y.options[tot].value = tot;
}).remove(); ordenarCombos2();});
$("#quitar").click(function() {
$("#selectResult option:selected").each(function(i){
var $x = $("select#selectGrupos");
var tot = $("#selectGrupos option").length;
var y = $x.get(0)
y.options[tot] = new Option;
y.options[tot].text = $(this).text();
y.options[tot].value = tot;
}).remove(); ordenarCombos1();});
$("#quitarTodo").click(function() {
$("#selectResult option").each(function(i){
var $x = $("select#selectGrupos");
var tot = $("#selectGrupos option").length;
var y = $x.get(0)
y.options[tot] = new Option;
y.options[tot].text = $(this).text();
y.options[tot].value = tot;
}).remove(); ordenarCombos1();});
});
function ordenarCombos1(){
var mylist = $("select#selectGrupos");
var listitems = mylist.children("option").get();
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
}
function ordenarCombos2(){
var mylist = $("select#selectResult");
var listitems = mylist.children("option").get();
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
}
Para la llamada a la función se requieren dos select «selectGrupos» y «selectResult» y cuatro botones agregarTodo, agregar, quitar y quitarTodo
|
|
En el siguiente enlace se muestra todo el código, solo se tiene que descomprimir y ejecutar el archivo este-IntercambioDeDatosEntreListas.html en un Explorardor web. eseste-IntercambioDeDatosEntreListas.rar