Selección en un árbol

Esta sección describe como obtener y definir los elementos seleccionados en un arbol.

Obteniendo los elementos seleccionados

Cada elemento en un árbol (que corresponde al elemento treeitem -en)- si se usa la vista del contenido del árbol ) puede ser seleccionado individualmente. Si añades el atributo seltype a un árbol y tiene el valor múltiple, el usuario puede seleccionar diversos elementos del árbol al mismo tiempo. La selección no tiene porque ser continua. El árbol provee un número de funciones que nos ayudan a determinar que elementos están seleccionados.

Gestión del evento de selección

Primero veamos como podemos determinar si un elemento esta seleccionado. El gestor de eventos onselect() puede incluirse en el elemento tree -(en))-. Cuando el usuario selecciona un elemento del árbol, el gestor de eventos es llamado. El usuario puede también cambiar la selección usando las teclas del cursor. Si el usuario mantiene pulsadas las teclas del cursor para rápidamente desplazarse por los elementos, el gestor de eventos no es llamado hasta que el usuario deja de presionarlas. Esto ofrece una mayor rapidez y también implica que los elementos se mostrarán como seleccionados aunque nunca se llame al evento select para ellos.

La sintaxis para el gestor de eventos onselect es la siguiente.

<tree id="treeset" onselect="alert('Has seleccionado algo!');">

Índices del árbol

El árbol expone la propiedad currentIndex que podemos usar para obtener el elemento actualmente seleccionado, siendo el índice del primero 0. Puedes cambiar el elemento seleccionado si le asignas un nuevo valor a esta propiedad.

Los elementos hijos son incluidos en el contador justo después de sus padres. Esto significa que si hay tres elementos en la raíz y cada uno tiene 2 hijos, habrá un total de nueve elementos. El primer elemento (índice 0) será el primer elemento raíz, el siguiente (índice 1) será el primer hijo, el segundo hijo estará en el índice 2 y el segundo elemento raíz en el índice 3 y así sucesivamente.

En la imagen vemos ocho filas, de las cuales dos están seleccionadas. La primera fila seleccionada tiene el índice 4 y la segunda el índice 7. Las filas que no se muestran no se incluyen en el contador de índices.

Selección múltiple

Para los árboles que permiten selecciones múltiples, obtener la lista de filas seleccionadas es algo más complicado. El elemento árbol tiene la propiedad view, la cual tiene la propiedad selection que a su vez contiene propiedades y métodos relacionados con la selección actual del árbol. Puedes usar esos métodos para obtener un conjunto de elementos seleccionados o modificar la selección.

Ya que los elementos seleccionados en un árbol no tienen porque estar contiguos, puedes obtener distintos grupos de elementos seleccionados que sí lo están, usando las funciones getRangeCount() y getRangeAt(). La primera devuelve el número de rangos de selecciones que hay actualmente. Si solo hay un valor seleccionado, este valor será 1. Deberás utilizar un bucle para recorrer el número de rangos, llamando getRangeAt() en cada uno para obtener los índices del comienzo y fin del rango.

La función getRangeAt() toma tres parámetros.

• El primero es el índice del rango.
• El segundo es un objeto que será rellenado por la función con el índice del primer elemento seleccionado.
• El tercero es un objeto que será rellenado con el índice del último elemento seleccionado.

Ejemplo con getRangeAt

var start = new Object();
var end = new Object();
var numRanges = tree.view.selection.getRangeCount();

for (var t=0; t<numRanges; t++){
  tree.view.selection.getRangeAt(t,start,end);
  for (var v=start.value; v<=end.value; v++){
    alert("El elemento "+v+" está seleccionado.");
  }
}

Hemos creado dos objetos llamados ‘start’ y ‘end’. Después hemos recorrido los rangos, el número de los cuales nos lo ha proporcionado la función getRangeCount(). Llamamos a la función getRangeAt() pasándole el índice del rango y los objetos ‘start’ y ‘end’. Estos objetos son devueltos con la propiedad 'value' rellenada. Así que si el primer rango es desde el tercer elemento hasta el séptimo, ‘start.value’ será 2 (recuerda que los índices cuentan desde 0) y ‘end.value’ será 6. Un dialogo de alerta se mostrará para cada índice seleccionado.

If you just want to find out if a specific row is selected, use can use the isSelected() function. It takes a row index as an argument and returns true if that row is selected.

alert(tree.view.selection.isSelected(3));

Modificando la selección del árbol

The selection object has a number of functions which may be used to change the selection. The simplest function is the select() function, which deselects any rows that are currently selected and selects one specific row. For example, the following code will select the row at index 5:

tree.view.selection.select(5);

Note that you should not just change the tree's currentIndex property to change the selection. Instead, you should use the selection's select function as in the example above. You can select all rows with the selectAll() function. Note that rows nested inside containers that are not open will not be selected. Naturally, this will only have any effect for trees that use multiple selection. There is also a clearSelection() function to clear the selection, and an invertSelection function to reverse the selection, that is, deselect all selected rows and select all unselected rows.

To select specific rows, use the rangedSelect() function which selects all rows in between two indices. Here is an example which selects rows between index 2 and 7. Note that rows 2 and 7 will also be selected.

tree.view.selection.rangedSelect(2,7,true);

The last argument indicates whether to add to the current selection or not. If true, the range will be added to the existing selection. If false, all existing selected rows will be deselected first. Finally, the clearRange() function may be used to deselect a range of rows, leaving rows outside the range unaffected.

tree.view.selection.clearRange(2,7);

Seguimos con como crear los detalles de vistas de un árbol.