Desarrollo JAVA: Tratamiento de listas html

Algo común con lo que me he ido topando cada cierto tiempo es el tratamiento de listas (tag select) en html, en estos tratamientos el denominador común es añadir, mover y eliminar elementos, el siguiente es un ejemplo que contiene el código javascript necesario para efectuar dichas operaciones y ha sido probado en Firefox 2.0.0.11 e IE 6.0.
<html>
<body>
<script language="JavaScript">

/**
* Regenera los valores de un input con los valores de una lista.
*/
function rebuildValues(sel, val){
val.value = "";
for(var i=0; i < sel.options.length; i++){
   val.value = val.value + ", " + sel.options[i].value;
}
val.value = val.value.substring(2);
}

/**
* Añade una opcion nueva al final de una lista especificada.
*/
function addOption(sel, identificador, texto){
if(document.all){
   var doc = sel.document;
   var opt = doc.createElement('OPTION');
   opt.value = identificador;
   opt.text = texto;
   sel.options.add(opt, sel.options.length);
}else{
   sel.options[sel.options.length] = new Option(texto, identificador);
}
}

/**
* Elimina el elemento seleccionado de una lista.
*/
function removeOption(sel){
if(document.all){
   sel.options.remove(sel.selectedIndex);
}else{
   sel.options[sel.selectedIndex] = null;
}
}

/**
* Mueve un elemento seleccionado de una lista a otra
*/
function move(selsource, seltarget, valsource, valtarget){
var opcion = selsource.options[selsource.selectedIndex];

addOption(seltarget, opcion.value, opcion.text);
removeOption(selsource);

rebuildValues(seltarget, valtarget);
rebuildValues(selsource, valsource);
}

/**
* Mueve el elemento selecciomado de la lista de la derecha a la de la izquierda.
*/
function rigthToLeft(){
var selsource = document.getElementById("mySelectRigth");
var seltarget = document.getElementById("mySelectLeft");

var valsource = document.getElementById("mySelectRigthVal");
var valtarget = document.getElementById("mySelectLeftVal");

move(selsource, seltarget, valsource, valtarget);
}

/**
* Mueve el elemento seleccionado de la lista izquierda a la de la derecha.
*/
function leftToRigth(){
var selsource = document.getElementById("mySelectLeft");
var seltarget = document.getElementById("mySelectRigth");

var valsource = document.getElementById("mySelectLeftVal");
var valtarget = document.getElementById("mySelectRigthVal");

move(selsource, seltarget, valsource, valtarget);
}

/**
* Mueve el elemento seleccionado de la lista de la izquierda a una posicion anterior
*/
function subir(){
var selsource = document.getElementById("mySelectLeft");
var valsource = document.getElementById("mySelectLeftVal");
if(selsource.selectedIndex > 0){
      var opcion = selsource.options[selsource.selectedIndex];
      var opcionAnterior = selsource.options[selsource.selectedIndex - 1];
 
      var opcionAnteriorValue = selsource.options[selsource.selectedIndex - 1].value;
      var opcionAnteriorText = selsource.options[selsource.selectedIndex - 1].text;
 
      opcionAnterior.text = opcion.text;
      opcionAnterior.value = opcion.value;
 
      opcion.text = opcionAnteriorText;
      opcion.value = opcionAnteriorValue;
 
      selsource.selectedIndex = selsource.selectedIndex - 1;
}
rebuildValues(selsource, valsource);
}

/**
* Mueve el elemento seleccionado de la lista de la izquierda a una posicion posterior
*/
function bajar(){
var selsource = document.getElementById("mySelectLeft");
if(selsource.selectedIndex < selsource.length - 1){
      selsource.selectedIndex = selsource.selectedIndex + 1;
      subir();
      selsource.selectedIndex = selsource.selectedIndex + 1;
}
}

</script>

<table border="1">
<tr>
<td>Elementos actuales:<br/>
      <input id="mySelectLeftVal" type="text" size="15" value="A,B,C"/>
      <br/>
      <table>
         <tr>
            <td>
               <input type="button" value="subir " onclick="subir();">
               <br/><br/>
               <input type="button" value="bajar" onclick="bajar();">
            </td>
            <td>
               <select id="mySelectLeft" size="6" align="rigth">
                   <option value="A">left A</option>
                   <option value="B">left B</option>
                   <option value="C">left C</option>
               </select>
            </td>
         </tr>
      </table>
</td>
<td><br/><br/>
      <input type="button" value="<< agregar" onclick="rigthToLeft();">
      <br/><br/>
      <input type="button" value="     quitar >>" onclick="leftToRigth();">
</td>
<td>Elementos disponibles:<br/>
   <input id="mySelectRigthVal" type="text" size="15" value="D,E,F"/>
   <br/>
   <select id="mySelectRigth" size="6">
    <option value="D">rigth D</option>
    <option value="E">rigth E</option>
    <option value="F">rigth F</option>
   </select>
</td>
</tr>
</table>
</body>
</html>
Enlaces relacionados:
- FIN -
Top Tabs

20 December 2007

Tratamiento de listas html

No comments:
