jueves, 28 de mayo de 2009

Recorrer los nodos de un TreeView control desde javascript

Hace unos dias me surgio la necesidad de trabajar con el control treeview, mas concretamente he tenido que realizar una busqueda sobre sus nodos. Para llevar a cabo esta tarea tenia que recorrer todo el arbol y comprobar si el valor de alguno de los nodos coincidia con el texto que un usuario introduciria en una caja de texto. Esta tarea me ha llevado a investigar mas profundamente el control Treeview, es un cotrol digamos... diferente. Para recorrer el control primero de todo he tenido que fijarme en el html que se genera, este esta compuesto por capas y tablas. Un nodo es una tabla con una fila y dentro de esas filas celdas, que correspoden con la imagen de expandir colarpsar, la imagen que el nodo tenga y el nombre o texto del nodo. Si este nodo tiene nodos hijos, estos iran dentro de una tabla cada uno de ellos y todos ellos dentro de una etiqueta
que por identificador tendra el del nodo padre más un el sufijo "Nodes". Basandonos en esto el código seria el siguiente: //obtención de la cadena a buscar var keysrch = $get('<%=txtBuscar.ClientID %>').value; //obtencion del objeto Treeview var tree = document.getElementById('<%=arbolListines.ClientID%>'); if(keysrch != '') { //obtencion de todas las tablas que hay dentro del control var tables = tree.getElementsByTagName('table'); if(tables) { for (var i = 0, j = tables.length; i < j; i++) { //dentro de cada tabla accedemos a los enlaces que esta continen links = tables[i].getElementsByTagName('a'); if(links) { for (var x = 0, y = links.length; x < y; x++) { //si el primer nodo no es una imagen significa que no es ni el icono +/- //tampoco es la imagen que hemos asociado a nuestro nodo, con lo que ya hemos //llegado a la posición en la que se encuentra el texto que es lo que nos interesa if(links[x].firstChild.nodeName.toLowerCase() !='img') { // procesamos el texto para buscar si la cadena que de búsqueda esta dentro del nombre del nodo var result = links[x].innerHTML.toLowerCase().indexOf(keysrch); if (result != -1) { //hemos encontrado el nodo que buscabamos //procesar..... }//fin del if que comprueba que estemos buscando solo en el enlace que contiene el nombre } }//fin del bucle for que recorre todos los enlaces de cadad nodo } }//fin del bucle for que recorre las tablas que genera el control treeview en HTML }

No hay comentarios: