Posted By

ianmonge on 09/30/08


Tagged

javascript mootools


Versions (?)

Two Lists


 / 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.

  1. //******************************************************************************
  2. // Función nativa de Javascript que se ha modificado por otra.
  3. // Elimina un (o mas) elemento(s) de un array:
  4. Array.prototype.remove = function(from, to) {
  5. var rest = this.slice((to || from) + 1 || this.length);
  6. this.length = from < 0 ? this.length + from : from;
  7. return this.push.apply(this, rest);
  8. };
  9. //******************************************************************************
  10.  
  11. /*
  12.  * Clase Two_lists
  13.  *
  14.  * Permite que interactuen 2 elementos SELECT y 2 elementos INPUT del TYPE=BUTTON, para que
  15.  * que los elementos OPTION de dentro de los SELECT, puedan moverse de un SELECT a otro.
  16.  * Para hacer el movimiento, se selecciona el OPTION y se pulsa el botón correspondiente.
  17.  * También se puede hacer seleccionando múltiples OPTIONs con las teclas Ctrl o Shift, siempre
  18.  * que el SELECT tenga MULTIPLE=MULTIPLE. Para mover uno de manera más práctica, haciendo doble
  19.  * click también se moverá de SELECT.
  20.  *
  21.  * Para instanciar la clase, hay que pasar cuatro parámetros :
  22.  * * El primer SELECT
  23.  * * El segundo SELECT
  24.  * * El INPUT que mueve del primer SELECT al segundo
  25.  * * El INPUT que mueve del segundo SELECT al primero
  26.  *
  27.  * La clase posee cuatro funciones a parte de la constructora:
  28.  * * moveOptionToSelect2 (option)
  29.  * Mueve el option a nivel interno, es decir, en las 2 arrays internas con los datos de todos
  30.  * los OPTIONS, mueve el item referenciado al option de un array al otro, y después elimina el
  31.  * option del HTML.
  32.  * * moveOptionToSelect1 (option)
  33.  * Idem anterior, pero en el otro sentido.
  34.  * * updateSelect1 ()
  35.  * Actualiza los OPTIONs del primer SELECT, según el array interno referenciado a ese SELECT.
  36.  * Vacía el SELECT, y lo rellena creando los OPTIONS con sus datos.
  37.  * * updateSelect2 ()
  38.  * Idem anteior, pero en el segundo SELECT.
  39.  *
  40.  */
  41.  
  42. var Two_lists = new Class({
  43. Implements: [Options],
  44.  
  45. select1 : null,
  46. select2 : null,
  47. asignar : null,
  48. liberar : null,
  49. options1 : new Array(), // Array interno con los datos de los OPTIONs del primer SELECT
  50. options2 : new Array(), // Array interno con los datos de los OPTIONs del segundo SELECT
  51.  
  52. options: {},
  53.  
  54. //***********************************
  55. // INITIALIZE
  56. // Función constructora. Requiere por parámetros los dos elementos SELECTs del HTML, y los
  57. // dos INPUTs que interactuarán en la clase.
  58. //***********************************
  59. initialize: function(select1, select2, asignar, liberar){
  60.  
  61. // guarda el objeto implícito para dentro de las funciones
  62. var self = this;
  63.  
  64. this.select1 = select1;
  65. this.select2 = select2;
  66. this.asignar = asignar;
  67. this.liberar = liberar;
  68.  
  69. //generar el array con todos los options del select1
  70. this.select1.getElements('option').each( function(option) {
  71. self.options1.push({
  72. 'id' : option.get('value'),
  73. 'name' : option.get('html'),
  74. 'state' : true
  75. });
  76. });
  77.  
  78. //generar el array con todos los options del select2
  79. this.select2.getElements('option').each( function(option) {
  80. self.options2.push({
  81. 'id' : option.get('value'),
  82. 'name' : option.get('html'),
  83. 'state' : true
  84. });
  85. });
  86.  
  87. //crea el evento de asignar para el botón
  88. this.asignar.addEvent ('click', function () {
  89. var options_selected = self.select1.getElements('option').filter( function(option){
  90. return option.get('selected');
  91. });
  92.  
  93. options_selected.each ( function (option) {
  94. self.moveOptionToSelect2(option);
  95. });
  96. self.updateSelect2();
  97. });
  98.  
  99. //crea el evento de liberar para el botón
  100. this.liberar.addEvent ('click', function () {
  101. var options_selected = self.select2.getElements('option').filter( function(option){
  102. return option.get('selected');
  103. });
  104.  
  105. options_selected.each ( function (option) {
  106. self.moveOptionToSelect1(option);
  107. });
  108. self.updateSelect1();
  109. });
  110.  
  111. //crea el evento de asignar para el doble click en el option
  112. this.select1.addEvent ('dblclick', function () {
  113. self.asignar.fireEvent('click');
  114. });
  115.  
  116. //crea el evento de asignar para el doble click en el option
  117. this.select2.addEvent ('dblclick', function () {
  118. self.liberar.fireEvent('click');
  119. });
  120.  
  121. },
  122.  
  123. //***********************************
  124. // MOVE OPTION TO SELECT2
  125. // Realiza el moviento de los items en las arrays internas, y elimina el OPTION del HTML
  126. //***********************************
  127. moveOptionToSelect2 : function( option ) {
  128.  
  129. // guarda el objeto implícito para dentro de las funciones
  130. var self = this;
  131.  
  132. // calcula la posición donde se encuentra el option en el array de options del select original
  133. var position;
  134. this.options1.each( function(item, index) {
  135. if (item.id == option.get('value')) {
  136. position = index;
  137. }
  138. });
  139.  
  140. // hace el intercambio en los arrays
  141. this.options2.push(this.options1[position]);
  142. this.options1.remove(position);
  143.  
  144. // borra el option del select original
  145. option.destroy();
  146.  
  147. },
  148.  
  149. //***********************************
  150. // MOVE OPTION TO SELECT1
  151. // Realiza el moviento de los items en las arrays internas, y elimina el OPTION del HTML
  152. //***********************************
  153. moveOptionToSelect1 : function( option ) {
  154.  
  155. // guarda el objeto implícito para dentro de las funciones
  156. var self = this;
  157.  
  158. // calcula la posición donde se encuentra el option en el array de options del select original
  159. var position;
  160. this.options2.each ( function(item, index) {
  161. if (item.id == option.get('value')) {
  162. position = index;
  163. }
  164. });
  165.  
  166. // hace el intercambio en los arrays
  167. this.options1.push(this.options2[position]);
  168. this.options2.remove(position);
  169.  
  170. // borra el option del select original
  171. option.destroy();
  172.  
  173. },
  174.  
  175. //***********************************
  176. // UPDATE SELECT1
  177. // Vacía el primer SELECT de todos los OPTIONs, y los vuelve a crear según el array interno.
  178. //***********************************
  179. updateSelect1 : function() {
  180.  
  181. // guarda el objeto implícito para dentro de las funciones
  182. var self = this;
  183.  
  184. // borra los options del select de destino, y lo regera según el array
  185. this.select1.empty();
  186.  
  187. this.options1.each ( function(item) {
  188. if (item.state) {
  189. op = new Element('option', {
  190. 'id': 'dominio-' + item.id,
  191. 'value': item.id,
  192. 'html': item.name
  193. });
  194. op.inject(self.select1);
  195. }
  196. });
  197.  
  198. },
  199.  
  200. //***********************************
  201. // UPDATE TO SELECT2
  202. // Vacía el segundo SELECT de todos los OPTIONs, y los vuelve a crear según el array interno.
  203. //***********************************
  204. updateSelect2 : function() {
  205.  
  206. // guarda el objeto implícito para dentro de las funciones
  207. var self = this;
  208.  
  209. // borra los options del select de destino, y lo regera según el array
  210. this.select2.empty();
  211.  
  212. this.options2.each ( function(item) {
  213. op = new Element('option', {
  214. 'id': 'dominio-'+item.id,
  215. 'value': item.id,
  216. 'html': item.name
  217. });
  218. op.inject(self.select2);
  219. });
  220.  
  221. }
  222. });

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: MMDeveloper on September 30, 2008

object oriented programming is such a beautiful thing

You need to login to post a comment.