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="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;
}
別的
{
返回;
}
}
}
}
}
}
</腳本>