Seleccionar los nodos hermanos dentro de un TreeView con jQuery

Seleccionar los nodos hermanos dentro de un TreeView con jQuery

El nuestro objetivo ahora es que al momento de dar clic en un nodo automáticamente se seleccionen todos los hermanos sin incluir al nodo padre. Los pasos a seguir son los siguientes:

1. Primero guardamos en una variable la referencia al checkbox al que le hemos dado clic

2. Debemos seleccionar el DIV que contiene todos los nodos hermanos, para ello es importante revisar como está estructurado el árbol en el lado cliente.

En el lado cliente cada nodo es una tabla, todas la tablas (nodos) están contenidas dentro de un div que las agrupa para formar una rama del árbol, entonces para poder llegar al div que los contiene desde el checkbox al que hemos dado clic vamos a tener que usar el método parent() de jQuery, en realidad son 5 parent() (no se que tan eficiente sea pero da resultados), a continuación revisemos a que elemento corresponde cada parent

1er parent() : <TD>

2do parent(): <TR>

3er parent(): <TBODY>

4to parent(): <TABLE>

5to parent(): <DIV>

En la siguiente imagen podemo ver la estructura que estamos comentando: (para hecerlo he usado Internet Explorer Developer Toolbar )

4. Como ya tenemos el DIV que contiene los nodos recuperamos todos los checkbox que se encuentran dentro y los seleccionamos

A continuación el código

$("#TreeView1 :checkbox").click(SelNodosHermanos);

function SelNodosHermanos()

{

// Selecciona todos los nodos hermanos de una rama

var $this = $(this);

//hasta aqui he llegado al div que contiene todos los nodos hijos

var divNodos = $this.parent().parent().parent().parent().parent().get(0);

$(divNodos).find(':checkbox').attr('checked','-1');

}

No hay comentarios: