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
¿Porqué un Blog?
Con la evolución de la Tecnología, las formas de comunicación se han democratizado, es decir cada vez es más común que cualquier persona que tenga alguna idea que desea compartir, con unos cuantos pasos se puede dar a conocer hasta los confines del mundo. Con muy poco de inversión -Casi siempre de solamente tiempo- se puede difundir información a todo el mundo de forma sencilla y gratuita.
Un Blog es una bitácora que se escribe de forma periódica y lo más interesante es que los autores escriben y los lectores comentan, de tal forma que se establece un dialogo entre ambos para intercambiar diversas posiciones.
Todos tenemos algo que contar aunque sean ideas simples y comunes es muy probable que alguien de las millones de personas que tendrán la posibilidad de ver nuestras publicaciones les sirva. Que estas no se queden con nosotros, hagamos uso de la tecnología para mostrarles al mundo nuestras ideas. Ademas creo que es sumamente importante para los que nos dedicamos a las áreas de Sistemas tener un prestigio en la red que les indique a los posibles cliente nuestras capacidades.
Desde mi experiencia es complicado evaluar un desarrollador en base a una entrevista o examen psicometrico, porque no sabes si en ese momento esta pasado por un problema importante o al contrario alguien le comento o leyó como debe comportarse en una entrevista de trabajo y le resulta perfecta. La única forma de conocer el desempeño de una persona es trabajar con el varias semanas o hasta meses. Y que tal si vemos que esa persona tiene un prestigio en la red, con artículos, cursos, materiales de apoyo, Blog, seguidores… Da muchos elementos para tener mas certidumbre de su trabajo.
Paginador javascript
Este Post describe el código en JavaScript para realiza el paginado de datos, tomados desde un arreglo. Las siguientes imágenes muestra como se vera al ejecutarlo.
Paginador
Paginador 2
Es una modificación que realice a partir de un código de Jorge Zazo de la Encarnación, el cual también se incluye en el paquete de ejemplo que se puede descargar al final del Post.
Paginador Original
En el siguiente recuadro se muestra el código completo con los comentarios de algunas lineas para entender las funciones principales.
function pinta(num,inicio){//función creada por Jorge Zazo de la Encarnación http://www.forosdelweb.com/1201706-post4.html
//Modificaciones Ariel Oliva arieloliva.com
var pagNow = inicio;
var limSup;
var numPaginasFSt = "";
var DatoI;
var DatoF;
var pagAnt;
var pagSig;
var rutaIma=""; //Ruta base de las imagenes
var numPaginas = misDatos.length /num; //Detecto el número "entero" de páginas
numPaginas = numPaginas.toString();
numPaginas = numPaginas.split(".");
numPaginasF = eval(numPaginas[0]);
if (misDatos.length % num != 0){ //Si el resultado de la división anterior no es exacto le añado manualmente una página más
numPaginasF ++;
}
if((pagNow + 1) != numPaginasF){//Establezco el número de datos a mostrar si la última página no tiene el mismo número de datos
limSup = -1;
} else {
limSup = (misDatos.length - (numPaginasF * num))-1;
}
DatoI = pagNow * num;//Establezco el dato inicial y el dato final de la paginación
DatoF = DatoI + (num+limSup);
if (pagNow == 0){//Establezco cual es la página anterior y la siguiente
pagAnt = 0;
} else {
pagAnt = pagNow - 1;
}
if (pagNow == (numPaginasF-1)){
pagSig = pagNow;
} else {
pagSig = pagNow + 1;
}
for (i=0;i<numPaginasF;i++){//Pinto la cadena con el número de páginas y sus correspondientes enlaces
numPaginasFSt += ""+ (i+1) +" ";
}
if (primera == 0){//Establezco si es la primera vez que se crean los elementos
var creo = document.createElement("span");
document.getElementById("contenido").appendChild(creo);
var cadena = "
«; for (i=0;i<encabeza.length;i++){//crea cabeceras cadena = cadena + «»; } cadena = cadena + «»; for (DatoI;DatoI<=DatoF;DatoI++){//Pinto todos los elementos con cada dato… cadena = cadena + «» for(j=1;j<=encabeza.length;j++){ var obtDatos = «misDatos[DatoI].dato»+j; cadena = cadena + «»; } cadena = cadena + «» } cadena = cadena + »
| «+encabeza[i]+» |
| «+eval(obtDatos) + « |
«; contenido.innerHTML = cadena; var pagina = document.createElement(«span»);//… y la paginación. document.getElementById(«paginacion»).appendChild( pagina); paginacion.innerHTML += »
![Primero]("+rutaIma+"btnPri.jpg)
» +»![Anterior]("+rutaIma+"btnAnt.jpg)
» + numPaginasFSt +»![Siguiente]("+rutaIma+"btnSig.jpg)
» +»![Ultimo]("+rutaIma+"btnUlt.jpg)
«; primera = 1; } else { borra();//Borro las capas ya pintadas en la primera vez var creo = document.createElement(«span»); document.getElementById(«contenido»).appendChild(creo); var cadena = »
«; for (i=0;i<encabeza.length;i++){//crea cabeceras cadena = cadena + «»; } cadena = cadena + «»; for (DatoI;DatoI<=DatoF;DatoI++){//Pinto todos los elementos con cada dato… cadena = cadena + «» for(j=1;j<=encabeza.length;j++){ var obtDatos = «misDatos[DatoI].dato»+j; cadena = cadena + «»; } cadena = cadena + «» } cadena = cadena + »
| «+encabeza[i]+» |
| «+eval(obtDatos) + « |
«; contenido.innerHTML = cadena; var pagina = document.createElement(«span»);//… y la paginación. document.getElementById(«paginacion»).appendChild( pagina); paginacion.innerHTML += »
» +» » + numPaginasFSt +» » +» «; } } function borra(){ contenido.innerHTML = «»; paginacion.innerHTML = «»; }
Para la llamada a la función, primeramente creamos la función «datos«, en la cual pasamos como parámetros la cantidad de columnas que existirán. En la variable «encabeza» agregamos el titulo de cada columna. En el arreglo «misDatos» cargamos los valores con un indice que ira creciendo de acuerdo a la cantidad de registros que deseemos. En el cuerpo del documento deberán existir los div «contenido» y «paginacion«. Finalmente se hace el llamado a la función «pinta(param1,param2)«, donde «param1» es la cantidad de registros que se mostraran por hoja y «param2» es la pagina+1 que se mostrara al cargar el paginador, por ejemplo para que se muestre inicialmente la primera pagina el parámetro deberá valer 0.
En el siguiente enlace se muestra todo el código, solo se tiene que descomprimir y ejecutar el archivo este-paginadorJavaScript.html en un Explorardor web. eseste-paginadorJavaScript.rar