/ Published in: JavaScript

Clase en Mootools para hacer interactivas dos listas. Con dos elementos html SELECT y dos INPUT, permite pasar los items (OPTION) de una lista a otra, de la forma asignar o liberar. Ejemplo: lista con jugadores y lista con jugadores asignados al equipo; poder asignar los jugadores al equipo o liberarlos del equipo.
Clase mejorable, es bastante básica y fácil de entender. Requiere la modificación de la función nativa REMOVE en Arrays de Javascript.
Expand |
Embed | Plain Text
//****************************************************************************** // Función nativa de Javascript que se ha modificado por otra. // Elimina un (o mas) elemento(s) de un array: Array.prototype.remove = function(from, to) { var rest = this.slice((to || from) + 1 || this.length); this.length = from < 0 ? this.length + from : from; return this.push.apply(this, rest); }; //****************************************************************************** /* * Clase Two_lists * * Permite que interactuen 2 elementos SELECT y 2 elementos INPUT del TYPE=BUTTON, para que * que los elementos OPTION de dentro de los SELECT, puedan moverse de un SELECT a otro. * Para hacer el movimiento, se selecciona el OPTION y se pulsa el botón correspondiente. * También se puede hacer seleccionando múltiples OPTIONs con las teclas Ctrl o Shift, siempre * que el SELECT tenga MULTIPLE=MULTIPLE. Para mover uno de manera más práctica, haciendo doble * click también se moverá de SELECT. * * Para instanciar la clase, hay que pasar cuatro parámetros : * * El primer SELECT * * El segundo SELECT * * El INPUT que mueve del primer SELECT al segundo * * El INPUT que mueve del segundo SELECT al primero * * La clase posee cuatro funciones a parte de la constructora: * * moveOptionToSelect2 (option) * Mueve el option a nivel interno, es decir, en las 2 arrays internas con los datos de todos * los OPTIONS, mueve el item referenciado al option de un array al otro, y después elimina el * option del HTML. * * moveOptionToSelect1 (option) * Idem anterior, pero en el otro sentido. * * updateSelect1 () * Actualiza los OPTIONs del primer SELECT, según el array interno referenciado a ese SELECT. * VacÃa el SELECT, y lo rellena creando los OPTIONS con sus datos. * * updateSelect2 () * Idem anteior, pero en el segundo SELECT. * */ var Two_lists = new Class({ Implements: [Options], select1 : null, select2 : null, asignar : null, liberar : null, options1 : new Array(), // Array interno con los datos de los OPTIONs del primer SELECT options2 : new Array(), // Array interno con los datos de los OPTIONs del segundo SELECT options: {}, //*********************************** // INITIALIZE // Función constructora. Requiere por parámetros los dos elementos SELECTs del HTML, y los // dos INPUTs que interactuarán en la clase. //*********************************** initialize: function(select1, select2, asignar, liberar){ // guarda el objeto implÃcito para dentro de las funciones var self = this; this.select1 = select1; this.select2 = select2; this.asignar = asignar; this.liberar = liberar; //generar el array con todos los options del select1 this.select1.getElements('option').each( function(option) { self.options1.push({ 'id' : option.get('value'), 'name' : option.get('html'), 'state' : true }); }); //generar el array con todos los options del select2 this.select2.getElements('option').each( function(option) { self.options2.push({ 'id' : option.get('value'), 'name' : option.get('html'), 'state' : true }); }); //crea el evento de asignar para el botón this.asignar.addEvent ('click', function () { var options_selected = self.select1.getElements('option').filter( function(option){ return option.get('selected'); }); options_selected.each ( function (option) { self.moveOptionToSelect2(option); }); self.updateSelect2(); }); //crea el evento de liberar para el botón this.liberar.addEvent ('click', function () { var options_selected = self.select2.getElements('option').filter( function(option){ return option.get('selected'); }); options_selected.each ( function (option) { self.moveOptionToSelect1(option); }); self.updateSelect1(); }); //crea el evento de asignar para el doble click en el option this.select1.addEvent ('dblclick', function () { self.asignar.fireEvent('click'); }); //crea el evento de asignar para el doble click en el option this.select2.addEvent ('dblclick', function () { self.liberar.fireEvent('click'); }); }, //*********************************** // MOVE OPTION TO SELECT2 // Realiza el moviento de los items en las arrays internas, y elimina el OPTION del HTML //*********************************** moveOptionToSelect2 : function( option ) { // guarda el objeto implÃcito para dentro de las funciones var self = this; // calcula la posición donde se encuentra el option en el array de options del select original var position; this.options1.each( function(item, index) { if (item.id == option.get('value')) { position = index; } }); // hace el intercambio en los arrays this.options2.push(this.options1[position]); this.options1.remove(position); // borra el option del select original option.destroy(); }, //*********************************** // MOVE OPTION TO SELECT1 // Realiza el moviento de los items en las arrays internas, y elimina el OPTION del HTML //*********************************** moveOptionToSelect1 : function( option ) { // guarda el objeto implÃcito para dentro de las funciones var self = this; // calcula la posición donde se encuentra el option en el array de options del select original var position; this.options2.each ( function(item, index) { if (item.id == option.get('value')) { position = index; } }); // hace el intercambio en los arrays this.options1.push(this.options2[position]); this.options2.remove(position); // borra el option del select original option.destroy(); }, //*********************************** // UPDATE SELECT1 // VacÃa el primer SELECT de todos los OPTIONs, y los vuelve a crear según el array interno. //*********************************** updateSelect1 : function() { // guarda el objeto implÃcito para dentro de las funciones var self = this; // borra los options del select de destino, y lo regera según el array this.select1.empty(); this.options1.each ( function(item) { if (item.state) { op = new Element('option', { 'id': 'dominio-' + item.id, 'value': item.id, 'html': item.name }); op.inject(self.select1); } }); }, //*********************************** // UPDATE TO SELECT2 // VacÃa el segundo SELECT de todos los OPTIONs, y los vuelve a crear según el array interno. //*********************************** updateSelect2 : function() { // guarda el objeto implÃcito para dentro de las funciones var self = this; // borra los options del select de destino, y lo regera según el array this.select2.empty(); this.options2.each ( function(item) { op = new Element('option', { 'id': 'dominio-'+item.id, 'value': item.id, 'html': item.name }); op.inject(self.select2); }); } });
Comments

You need to login to post a comment.
object oriented programming is such a beautiful thing