Intercambio entre listas

Por arieloliva

En Oct - 14 - 2012

0 Comentarios

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

$("#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); });
	}

$(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

	<table cellpadding="0" cellspacing="0" border="1">
        <tr>
           <td><select id="selectGrupos" name="selectGrupos" size="10" multiple="multiple" style="width: 200px;" >
                 <option value="A">A</option>
				 <option value="B">B</option>
				 <option value="C">C</option>
				 <option value="D">D</option>
				 <option value="E">E</option>
				 <option value="F">F</option>
				 <option value="G">G</option>
				 <option value="H">H</option>
				 <option value="I">I</option>
				 <option value="J">J</option>
           </select></td>
           <td>
           
           <input type="button" id="agregarTodo" name="agregarTodo" value=">>" style="width: 50px"/><br/>
		           		<input type="button" id="agregar" name="agregar" value=">" style="width: 50px"/><br/>
		           		<input type="button" id="quitar" name="quitar" value="&#60" style="width: 50px"/><br/>
		           		<input type="button" id="quitarTodo" name="quitarTodo" value="&#60&#60" style="width: 50px"/>
           
           </td>
           <td><select id="selectResult" name="selectResult" size="10" multiple="multiple" style="width: 200px;">
                 <option value="1">10</option>
				 <option value="2">20</option>
				 <option value="3">30</option>
				 <option value="4">40</option>
				 <option value="5">50</option>
				 <option value="6">60</option>
				 <option value="7">70</option>
				 <option value="8">80</option>
				 <option value="9">90</option>
				 <option value="10">100</option>
           </select></td>
        </tr> 
     </table>

<tr>

</select></td>

<td>

<input type="button" id="agregarTodo" name="agregarTodo" value=">>" style="width: 50px"/><br/>

<input type="button" id="agregar" name="agregar" value=">" style="width: 50px"/><br/>

</td>

</select></td>

</tr>

</table>

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

Relacionado

Categories: JavaScript, jquery, Programacion

Mas popular
Mas reciente

Suscríbete al blog por correo electrónico

Introduce tu correo electrónico para recibir notificaciones de nuevas entradas.

Dirección de email

Únete a otros 4 suscriptores
Comentarios recientes
- arieloliva en Mascara de moneda mientras se escribe
- Wilmer P. Silva en Mascara de moneda mientras se escribe
- RAngel en Reemplazar saltos de linea en Oracle
- Daniel Ruiz en Mascara de moneda mientras se escribe
- David en Reemplazar saltos de linea en Oracle
Donar
Por si te sobran unos pesos y creas que la información del Blog te ha servido como para separarte de ellos.
Spam bloqueado

16.155 mensajes de spam bloqueados por Akismet
Calendario
septiembre 2023

L M X J V S D

1 2 3

4 5 6 7 8 9 10

11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30

« Ene
Categorías
Categorías
Nube de Eiquetas
ajax API REST arquitectura JEE blog Bootstrap Controller Crud dao dominio weblogic Eclipse entity Git github Glassfish Hypermedia Instalar Weblogic 12 intercambio de ideas interfaces java Java EE javascript JEE jpa jquery Json kanban LibreOffice Linux listas mascara de moneda Maven mysql mysql workbench OpenOffice Origenes de Datos paginador pom.xml Recortar imagenes Reemplazar repository Spring SpringBoot Ubuntu web.xml WebLogic
Blog
Hosting
- Free Web Hosting
- Hospedando
Musica
Tecnologia
- Tecno Magazine

ArielOliva