ASP.NET 2.0 Treeview 复选框 - 全部选中 - Javascript

ASP.NET 2.0 TreeView 具有许多内置功能，例如显示所有树节点的复选框。节点级别格式、样式等，启用 ShowCheckBoxes="All" 属性将其设置为显示所有节点的复选框。其他选项是 Leaf、None、Parent 和 Root，它们在各自的节点级别显示复选框。 None 不显示复选框。

当我们设置 ShowCheckBoxes="All" 时，我们希望提供一项功能，人们可以选择根节点上的复选框，以便自动选中所有其他复选框。基本上，当检查父节点时，应该自动检查所有子节点。

在客户端完成此任务而不涉及回发将是直观的。

以下代码片段有助于完成相同的任务。

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 ="值"></asp:TreeNodeBinding>

</DataBindings>

</asp:TreeView>

在上面的TreeView声明代码中，您可以找到属性onclick="client_OnTreeNodeChecked();" event 实际上是完成此任务的 JavaScript 函数。

Javascript 代码片段如下：-

<script language="javascript" type="text/javascript">
函数 client_OnTreeNodeChecked()
{
var obj = window.event.srcElement;
var treeNodeFound = false;
var 检查状态；
if (obj.tagName == "INPUT" && obj.type == "复选框") {
var 树节点 = obj;
checkState = 树节点.checked;
做
{
obj = obj.parentElement;
} while (obj.tagName != "TABLE")
varparentTreeLevel = obj.rows[0].cells.length;
varparentTreeNode = obj.rows[0].cells[0];
var table = obj.parentElement.getElementsByTagName("TABLE");
var numTables =tables.length
if (numTables >= 1)
{
for (i=0; i < numTables; i++)
{
if (表[i] == obj)
{
树节点发现 = true;
我++;
if (i == numTables)
{
返回;
}
}
if (treeNodeFound == true)
{
var childTreeLevel = table[i].rows[0].cells.length;
if (子树级别 > 父树级别)
{
var cell = table[i].rows[0].cells[childTreeLevel - 1];
var 输入 = cell.getElementsByTagName("INPUT");
输入[0].checked = checkState;
}
别的
{
返回;
}
}
}
}
}
}
</脚本>