Jul 04, 2011, 8:45 AM
A checked/unchecked TreeNode Sample
This is a checked/unchecked TreeNode sample , when the parent node is checked, all child nodes are checked. when all the child nodes are unchecked, the parent node is also unchecked.
part of the bodys of this post I did not wrote, I just wrote a js.
The code is very efficient, especially when the node is much.
The disadvantage of before code is :
1. when the childnode is checked/unchecked,all of parentnodes will be loop.so filter the leaf node "if(!node.attributes.leaf)".
2. need to set the node status: check and indeterminate.
part of the bodys of this post I did not wrote, I just wrote a js.
The code is very efficient, especially when the node is much.
The disadvantage of before code is :
1. when the childnode is checked/unchecked,all of parentnodes will be loop.so filter the leaf node "if(!node.attributes.leaf)".
2. need to set the node status: check and indeterminate.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>A very efficient checked/unchecked TreeNode Sample</title>
<script type="text/javascript">
//node check
function nodeChecked(node, checked) {
//parentnode code
var parentNode = node.parentNode;
if(parentNode !== null) {
parentCheck(parentNode,checked);
}
//childnode code
childCheck(node,checked);
}
function childCheck(node,checked){
node.expand();
var nodeAttr = node.attributes;
if(!nodeAttr.leaf)//filter leaf,when the leaf is checked, do not loop the parentnode event. great efficiency
{
node.eachChild(function(child){
if (child && child.getUI().checkbox != undefined){
child.getUI().checkbox.checked=checked;
}
childCheck(child,checked);
});
}
}
function parentCheck(node ,checked){
var checkbox = node.getUI().checkbox;
if(typeof checkbox == 'undefined')return ;
var state=this.childHasChecked(node,checked);
if (state==0){//All of the childnodes are unchecked (checked=false and indeterminate=false)
checkbox.checked=false;
checkbox.indeterminate=false;
} else if(state==1){ //All of the childnodes are checked (checked=true and indeterminate=true),in fact,the childnodes are indeterminate,
checkbox.checked=true;
checkbox.indeterminate=true;
}else{ //All of the childnodes are checked , not indeterminate .(checked=true and indeterminate=false)
checkbox.checked=true;
checkbox.indeterminate=false;
}
// checkbox.checked = checked;
node.attributes.checked = checkbox.checked;
node.getOwnerTree().fireEvent('check', node, checked);
var parentNode = node.parentNode;
if(parentNode !== null)
{
this.parentCheck(parentNode,checked);
}
}
function childHasChecked(node,checked) {
var childNodes = node.childNodes;
var retValue=0;
if(childNodes || childNodes.length>0){
for(var i=0;i<childNodes.length;i++){
var checkbox=childNodes[i].getUI().checkbox;
//a. the node is checked and the "indeterminate" is false
//b. Aim of this loop is cancel the selected state. if the childnode has been checked,
// and [ if (indeterminate==true) the node is marked "indeterminate=true" else "checked=false and indeterminate=false" ]
if(!checked){
if (checkbox.checked )return 1;
}else{
retValue=2;
if (!checkbox.checked || (checkbox.checked && checkbox.indeterminate)){
return 1;
}
}
}
}
return retValue;
}
//get checked nodes
function findCheckedNodes(tree){
var checkedNodes = tree.getChecked();//the tree object is treepanel id
var checkedIds = [];
for(var i=0;i<checkedNodes.length;i++){
checkedIds.push(checkedNodes[i].id);
}
return checkedIds.join(',');
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:TreePanel ID="TreePanel1" runat="server" AutoHeight="true">
<Root>
<ext:TreeNode Text="Root (level 0)" Expanded="true" Checked="False">
<Nodes>
<ext:TreeNode Text="Node1 (level 1)" Expanded="true">
<Nodes>
<ext:TreeNode Text="Node1 (level 2)" Expanded="false">
<Nodes>
<ext:TreeNode Text="Node1 (level 3)">
<Listeners>
<CheckChange Fn="nodeChecked" />
</Listeners>
</ext:TreeNode>
<ext:TreeNode Text="Node2 (level 3)">
<Listeners>
<CheckChange Fn="nodeChecked" />
</Listeners>
</ext:TreeNode>
</Nodes>
<Listeners>
<CheckChange Fn="nodeChecked" />
</Listeners>
</ext:TreeNode>
</Nodes>
<Listeners>
<CheckChange Fn="nodeChecked" />
</Listeners>
</ext:TreeNode>
<ext:TreeNode Text="Node2 (level 1)" Expanded="true">
<Nodes>
<ext:TreeNode Text="Node1 (level 2)" Expanded="false">
<Nodes>
<ext:TreeNode Text="Node1 (level 3)" />
<ext:TreeNode Text="Node2 (level 3)" />
</Nodes>
<Listeners>
<CheckChange Fn="nodeChecked" />
</Listeners>
</ext:TreeNode>
</Nodes>
<Listeners>
<CheckChange Fn="nodeChecked" />
</Listeners>
</ext:TreeNode>
</Nodes>
<Listeners>
<CheckChange Fn="nodeChecked" />
</Listeners>
</ext:TreeNode>
</Root>
<Listeners>
<BeforeAppend Handler="node.attributes.checked = false;" />
<%-- To avoid setting .Checked for each node --%>
</Listeners>
</ext:TreePanel>
<ext:Button ID="btnDelete" runat="server" Text="get checked id">
<Listeners>
<Click Handler="alert(findCheckedNodes(TreePanel1));" />
</Listeners>
</ext:Button>
</form>
</body>
</html>
Last edited by msnqu; Jul 07, 2011 at 6:01 AM.
Reason: Optimization of JS code