El Post describe el código en JavaScript para realizar el intercambio de datos entre 2 listas.

Intercambio de datos entre dos listas

Intercambio de datos entre dos listas

Consta de cuatro botones, los cuales tienen las siguientes funciones, de acuerdo a su posición:

  1. Pasa todo el contenido de la lista izquierda a la lista derecha. Ordena la lista destino.
  2. Pasa los registros seleccionados de la lista derecha a la lista izquierda. Ordena la lista destino.
  3. Pasa los registros seleccionados de la lista izquierda a la lista derecha. Ordena la lista destino.
  4. 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.

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.

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

Leave a Reply


API REST 5. Hypermedia

Contenido1 Introducción2 Programar hypermedia2.1 Crear Entity2.1.1 PersonaHateoas2.1.2 GrupoHateoas2.1.3 PaisHateoas2.2 Crear […]

API REST 4. Calidad al implementar aplicacion Web

Contenido1 Introducción1.1 Nivel 1. Uso correcto de URIs1.2 Nivel 2. […]

API REST 3. Publicar y consumir

Contenido1 Descripción2 Publicar y Consumir2.1 Usando CRUD2.1.1 Crear Persona2.1.2 Consultar […]

API REST 2. Conectarse a Base de Datos MySQL

Contenido1 Descripción2 Crear la Base de Datos3 Agregar dependencias4 Crear […]

API REST 1. Spring

Contenido1 Descripción2 Pasos2.1 Instalar eclipse2.2 Instalar librerías de Spring2.3 Importar […]