程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> .NET實例教程 >> ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript

ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript

編輯:.NET實例教程


ASP.Net 2.0 TreeVIEw has many built-in features such as showing a checkbox for all the Tree Nodes. Node level formating, style, etc., Enabling the ShowCheckBoxes="All" property sets it to show a checkbox for all the nodes. The other options are Leaf, None, Parent and Root which show checkboxes at the respective node levels. None doesnt display CheckBoxes.

When we set ShowCheckBoxes="All", we would like to provide a feature where people can select the checkbox on the Root Node so that all the other checkboxes are checked automatically. Basically, when the parent node is checked, all the child nodes should be checked automatically.

It would be intuitive to accomplish this task at the clIEnt side without involving a postback.

The following code snippet helps in accomplishing the same.

TreeVIEw Declaration

<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>


In the above TreeView declaration Code, you can find the property onclick="clIEnt_OnTreeNodeChecked();" event which actually is the JavaScript function which would accomplish this task.

The Javascript Code snippet is as follows:-

<script language="Javascript" type="text/Javascript">
function clIEnt_OnTreeNodeChecked()
{
var obj = window.event.srcElement;
var treeNodeFound = false;
var checkedState;
if (obj.tagName == "INPUT" && obj.type == "checkbox") {
var treeNode = obj;
checkedState = treeNode.checked;
do
{
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)
{
return;
}
}
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;
}
else
{
return;
}
}
}
}
}
}
</script>


  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved