ASP.NET 2.0 TreeView verfügt über viele integrierte Funktionen, z. B. die Anzeige eines Kontrollkästchens für alle Baumknoten. Formatierung, Stil usw. auf Knotenebene. Durch Aktivieren der Eigenschaft ShowCheckBoxes="All" wird festgelegt, dass für alle Knoten ein Kontrollkästchen angezeigt wird. Die anderen Optionen sind Leaf, None, Parent und Root, die Kontrollkästchen auf den jeweiligen Knotenebenen anzeigen. Keine zeigt keine Kontrollkästchen an.
Wenn wir ShowCheckBoxes="All" festlegen, möchten wir eine Funktion bereitstellen, mit der Benutzer das Kontrollkästchen auf dem Root-Knoten auswählen können, sodass alle anderen Kontrollkästchen automatisch aktiviert werden. Wenn der übergeordnete Knoten überprüft wird, sollten grundsätzlich auch alle untergeordneten Knoten automatisch überprüft werden.
Es wäre intuitiv, diese Aufgabe auf der Clientseite ohne Postback auszuführen.
Der folgende Codeausschnitt hilft dabei, dasselbe zu erreichen.
TreeView-Deklaration
<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 ="Value"></asp:TreeNodeBinding>
</DataBindings>
</asp:TreeView>
Im obigen TreeView-Deklarationscode finden Sie die Eigenschaft onclick="client_OnTreeNodeChecked();" Ereignis, das eigentlich die JavaScript-Funktion ist, die diese Aufgabe erfüllen würde.
Das Javascript-Code-Snippet lautet wie folgt: –
<script language="javascript" type="text/javascript">
Funktion client_OnTreeNodeChecked()
{
var obj = window.event.srcElement;
var treeNodeFound = false;
var checkedState;
if (obj.tagName == "INPUT" && obj.type == "checkbox") {
var treeNode = obj;
reviewedState = treeNode.checked;
Tun
{
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.length
if (numTables >= 1)
{
for (i=0; i < numTables; i++)
{
if (tables[i] == obj)
{
treeNodeFound = true;
i++;
if (i == numTables)
{
zurückkehren;
}
}
if (treeNodeFound == true)
{
var childTreeLevel = tables[i].rows[0].cells.length;
if (childTreeLevel > parentTreeLevel)
{
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkedState;
}
anders
{
zurückkehren;
}
}
}
}
}
}
</script>