ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
2007-02-06 12:23
357 查看
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>
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>
相关文章推荐
- ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
- ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
- ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
- ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript (兼容firefox和IE)
- ASP.NET 2.0 TreeView中用JavaScript实现单选功能.
- ASP.NET 2.0 TreeView中用JavaScript实现选择子接点CheckBox是自动选择上父节点(或者所有父节点)
- ASP.NET 2.0 中 Treeview 的Checkboxes 选中根 枝叶全选中的实现方法(转)
- ASP.NET 2.0 TreeView 树状控件-父子节点选择javascript脚本
- Asp.Net 2.0 TreeView的Checkbox级联操作
- 将 JavaScript 与 ASP.NET 2.0 配合使用 Z
- Client Side Expand/Collapse All Nodes For ASP.NET 2.0 Treeview
- asp.net 2.0中TREEVIEW中动态增加结点
- 虚拟主机下asp.net 2.0的导航控件treeview,menu等出错
- asp.net 2.0 TreeView 数据绑定
- Asp.net 2.0 Treeview无限级无刷新示例
- Asp.Net 2.0 TreeView的Checkbox级联操作
- ASP.NET程序模仿windows资源管理器(xml, xsl, javascript, asp.net (treeView) 的结合使用
- Asp.net 2.0 TreeView的checkbox Js全选与反选
- 解决asp.net 2.0 中treeview的checkbox级联选择
- Asp.net 2.0控件开发相关调试(JavaScript调试和自定义控件设计时调试)