ASP.NET 2.0 TreeView possède de nombreuses fonctionnalités intégrées telles que l'affichage d'une case à cocher pour tous les nœuds d'arborescence. Formatage, style, etc. au niveau du nœud. L'activation de la propriété ShowCheckBoxes="All" la définit pour afficher une case à cocher pour tous les nœuds. Les autres options sont Leaf, None, Parent et Root qui affichent des cases à cocher aux niveaux de nœuds respectifs. Aucun n'affiche les cases à cocher.
Lorsque nous définissons ShowCheckBoxes="All", nous souhaitons fournir une fonctionnalité permettant aux utilisateurs de cocher la case sur le nœud racine afin que toutes les autres cases soient cochées automatiquement. Fondamentalement, lorsque le nœud parent est vérifié, tous les nœuds enfants doivent être vérifiés automatiquement.
Il serait intuitif d'accomplir cette tâche côté client sans impliquer de publication.
L'extrait de code suivant permet d'accomplir la même chose.
Déclaration TreeView
<asp:TreeView ID="TreeView1" Runat="server" DataSourceID="XmlDataSource1" onclick="client_OnTreeNodeChecked();" ShowCheckBoxes="all">
<DataBindings>
<asp:TreeNodeBinding DataMember="Category" ValueField="ID" TextField="Name"></asp:TreeNodeBinding>
<asp:TreeNodeBinding DataMember="Description" ValueField="Value" TextField ="Valeur"></asp:TreeNodeBinding>
</DataBindings>
</asp:TreeView>
Dans le code de déclaration TreeView ci-dessus, vous pouvez trouver la propriété onclick="client_OnTreeNodeChecked();" événement qui est en fait la fonction JavaScript qui accomplirait cette tâche.
L'extrait de code Javascript est le suivant : -
<script language="javascript" type="text/javascript">
fonction client_OnTreeNodeChecked()
{
var obj = window.event.srcElement;
var treeNodeFound = faux ;
var État vérifié ;
if (obj.tagName == "INPUT" && obj.type == "checkbox") {
var treeNode = obj;
checkState = treeNode.checked;
faire
{
obj = obj.parentElement;
} while (obj.tagName != "TABLE")
var parentTreeLevel = obj.rows[0].cells.length;
var parentTreeNode = obj.rows[0].cells[0];
var tables = obj.parentElement.getElementsByTagName("TABLE");
var numTables = tables.longueur
si (numTables >= 1)
{
pour (i=0; i < numTables; i++)
{
si (tables[i] == obj)
{
treeNodeFound = vrai ;
je++;
si (i == numTables)
{
retour;
}
}
si (treeNodeFound == vrai)
{
var childTreeLevel = tables[i].rows[0].cells.length;
si (enfantTreeLevel > parentTreeLevel)
{
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
var inputs = cell.getElementsByTagName("INPUT");
entrées[0].checked = vérifiéState ;
}
autre
{
retour;
}
}
}
}
}
}
</script>