ASP.NET 2.0 TreeView tiene muchas características integradas, como mostrar una casilla de verificación para todos los nodos del árbol. Formato, estilo, etc. a nivel de nodo. Al habilitar la propiedad ShowCheckBoxes="Todos", se configura para que muestre una casilla de verificación para todos los nodos. Las otras opciones son Hoja, Ninguna, Principal y Raíz, que muestran casillas de verificación en los respectivos niveles de nodo. Ninguno no muestra casillas de verificación.
Cuando configuramos ShowCheckBoxes="Todos", nos gustaría proporcionar una función donde las personas puedan seleccionar la casilla de verificación en el nodo raíz para que todas las demás casillas de verificación se marquen automáticamente. Básicamente, cuando se verifica el nodo principal, todos los nodos secundarios deben verificarse automáticamente.
Sería intuitivo realizar esta tarea en el lado del cliente sin implicar una devolución de datos.
El siguiente fragmento de código ayuda a lograr lo mismo.
Declaración de TreeView
<asp:TreeView ID="TreeView1" Runat="servidor" DataSourceID="XmlDataSource1" onclick="client_OnTreeNodeChecked();" ShowCheckBoxes="all">
<DataBindings>
<asp:TreeNodeBinding DataMember="Categoría" ValueField="ID" TextField="Nombre"></asp:TreeNodeBinding>
<asp:TreeNodeBinding DataMember="Descripción" ValueField="Valor" TextField ="Valor"></asp:TreeNodeBinding>
</DataBindings>
</asp:TreeView>
En el código de declaración TreeView anterior, puede encontrar la propiedad onclick="client_OnTreeNodeChecked();" evento que en realidad es la función de JavaScript que realizaría esta tarea.
El fragmento de código Javascript es el siguiente: -
<script language="javascript" type="text/javascript">
función client_OnTreeNodeChecked()
{
var obj = ventana.event.srcElement;
var treeNodeFound = falso;
var estado verificado;
if (obj.tagName == "ENTRADA" && obj.type == "casilla de verificación") {
var nodoárbol = obj;
estado verificado = treeNode.checked;
hacer
{
obj = obj.parentElement;
} mientras (obj.tagName! = "TABLA")
var parentTreeLevel = obj.rows[0].cells.length;
var parentTreeNode = obj.rows[0].cells[0];
var tablas = obj.parentElement.getElementsByTagName("TABLA");
var numTables = tablas.longitud
si (númTablas >= 1)
{
para (i=0; i < numTables; i++)
{
si (tablas[i] == obj)
{
treeNodeFound = verdadero;
yo ++;
si (i == numTables)
{
devolver;
}
}
si (treeNodeFound == verdadero)
{
var childTreeLevel = tablas[i].filas[0].celdas.longitud;
if (NivelÁrbolHijo>NivelÁrbolPadre)
{
var celda = tablas[i].filas[0].celdas[childTreeLevel - 1];
var entradas = cell.getElementsByTagName("ENTRADA");
entradas[0].checked = checkState;
}
demás
{
devolver;
}
}
}
}
}
}
</script>