Extjs3.4中TreePanel含复选框树选中状态级联处理详解（含半选）

这里讨论TreePanel树含复选框且允许半选状态存在方式&＃xff0c;当选中某节点时时&＃xff0c;向上和向下的选中情况处理。在允许含半选的情况下&＃xff0c;在异步动态获取节点数据时&＃xff0c;通常都会在返回节点JSON数组数据中包含indeterminate属性。这里需要注意的是&＃xff1a;当json数据对象中indeterminate为true时&＃xff0c;无论checked为true或false&＃xff0c;对应的节点初始化时都会显示为半选状态&＃xff0c;并且节点属性checked和indeterminate值都为true。当json数据对象中indeterninate为false时&＃xff0c;若checked为true&＃xff0c;则初始化节点显示为选中状态&＃xff0c;节点属性checked值为true&＃xff0c;indeterninate为false&＃xff1b;若checked为false时&＃xff0c;则初始化节点显示为未选中状态&＃xff0c;节点属性checked为false&＃xff0c;indeterninate为false。

Html中CheckBox和Ext中CheckBox区别&＃xff1a;
1、初始化设置。若Html的CheckBox中indeterminate属性设置为true时&＃xff0c;check属性为false&＃xff1b;若Extjs的CheckBox中indeterminate属性设置为true&＃xff0c;则check属性会为true。
2、动态使用代码改变状态设置。Html中若CheckBox的indeterminate属性值被设置为true&＃xff0c;check属性值不会改变&＃xff1b;Extjs中CheckBox的Indeterminate属性被设置为true时&＃xff0c;需同时更改其UI的Indeterminate属性值为true&＃xff0c;并且不会改变其check值&＃xff0c;所以需处理使其改变&＃xff08;这里通常会把check属性也设置为true。目的&＃xff1a;为了使其在后面代码中用getChecked方法能同时获取到半选和全选复选框&＃xff09;。

Html中CheckBox和Ext中CheckBox相同点&＃xff1a;
1、默认不设置indeterminate属性时。Html和Extjs中在初始化不设置的情况下indeterminate属性默认为false。
2、单击改变选中状态&＃xff1a;Html中CheckBox在被单击改变复选框状态时&＃xff0c;无论之前其indeterminate属性值为true或false&＃xff0c;check值会变成相应的true或false&＃xff0c;在单击后indeterminate值都会被设置为false。Extjs中CheckBox在被单击时&＃xff0c;无论之前indeterminate属性和UI值是true还是false&＃xff0c;单击后indeterminate的属性值和UI值都会被设置为false&＃xff0c;并且check属性及其UI值都会被改变成对应的属性值。


下面为新建TreePanel实例。
情况一&＃xff1a;当选中某节点时&＃xff0c;展开并选中所有子孙节点&＃xff1b;当取消选中某节点时&＃xff0c;级联取消选中所有已加载子孙节点。复选框状态改变时都实现与上级节点关联。

var tree &＃61; new Ext.tree.TreePanel({id:&＃39;itree&＃39;,loader: new Ext.tree.TreeLoader({dataUrl:&＃39;findTreeNode.action&＃39;,baseParams:{}}),//是否显示线lines:true,autoScroll:true,root: new Ext.tree.AsyncTreeNode({text: &＃39;根节点&＃39;,draggable: false,id: &＃39;0&＃39;}),//不显示根节点rootVisible:false,listeners:{&＃39;checkchange&＃39;:function(node,checked){checkAttrSyn(node);//实现UI与属性选中状态同步if(checked){//当选中当前节点时&＃xff0c;展开并选中所有子孙节点expandInherit(node);}else{checkChilds(node);}checkParent(this,node);}}
})

或

var tree &＃61; new Ext.tree.TreePanel({id:&＃39;itree&＃39;,loader: new Ext.tree.TreeLoader({dataUrl:&＃39;findTreeNode.action&＃39;,baseParams:{}}),//是否显示线lines:true,autoScroll:true,root: new Ext.tree.AsyncTreeNode({text: &＃39;根节点&＃39;,draggable: false,id: &＃39;0&＃39;}),//不显示根节点rootVisible:false,listeners:{&＃39;checkchange&＃39;:function(node,checked){checkAttrSyn(node);//实现UI与属性选中状态同步if(checked){//当选中当前节点时&＃xff0c;展开并选中所有子孙节点expandInheritIncUI(node);}else{checkChilds(node);}checkParent(this,node);}}
})

以上两种实现推荐使用第一种。

情况二&＃xff1a;
1、若单击选中&＃xff08;或取消选中&＃xff09;本节点&＃xff0c;会级联选中&＃xff08;或取消选中)其已加载子孙节点。
2、展开本节点时&＃xff0c;若本节点为选中&＃xff08;或未选中&＃xff09;状态时&＃xff0c;会将本节点选中状态应用于已加载子孙节点&＃xff1b;若本节点为半选状态&＃xff0c;则不会影响子节点选中状态。
3、复选框状态改变时都实现与上级节点关联。

var tree &＃61; new Ext.tree.TreePanel({id:&＃39;itree&＃39;,loader: new Ext.tree.TreeLoader({dataUrl:&＃39;findTreeNode.action&＃39;,baseParams:{}}),//是否显示线lines:true,autoScroll:true,root: new Ext.tree.AsyncTreeNode({text: &＃39;根节点&＃39;,draggable: false,id: &＃39;0&＃39;}),//不显示根节点rootVisible:false,listeners:{&＃39;checkchange&＃39;:function(node,checked){checkAttrSyn(node);//实现UI与属性选中状态同步if(node.loaded) checkChildsIncUI(node);//当本节点子节点已加载&＃xff0c;则调用checkChilds方法checkParent(this,node);},//展开节点后触发&＃39;beforeexpandnode&＃39;:function(node){checkChilds(node);}}
})

或

var tree &＃61; new Ext.tree.TreePanel({id:&＃39;itree&＃39;,loader: new Ext.tree.TreeLoader({dataUrl:&＃39;findTreeNode.action&＃39;,baseParams:{}}),//是否显示线lines:true,autoScroll:true,root: new Ext.tree.AsyncTreeNode({text: &＃39;根节点&＃39;,draggable: false,id: &＃39;0&＃39;}),//不显示根节点rootVisible:false,listeners:{&＃39;checkchange&＃39;:function(node,checked){checkAttrSyn(node);//实现UI与属性选中状态同步if(node.loaded) checkChildsIncUI(node);//当本节点子节点已加载&＃xff0c;则调用checkChilds方法checkParent(this,node);},//展开节点后触发&＃39;expandnode&＃39;:function(node){checkChildsIncUI(node);}}
})

以上两种实现推荐使用第一种。

从上面TreePanel实例中可以看出&＃xff0c;在选择某个节点复选框或展开某个节点时都有监听处理&＃xff0c;其作用是同时向上和向下对节点进行选中状况处理。这里用到了一个属性同步和五个递归的辅助方法&＃xff0c;其代码如下&＃xff1a;

//实现当前节点UI与TreeNode选择状态属性同步
checkAttrSyn &＃61; function(node){node.attributes.checked &＃61; node.ui.checkbox.checked;node.attributes.indeterminate &＃61; node.ui.checkbox.indeterminate;
};//展开当前节点下所有子孙节点&＃xff0c;并将当前节点选中状态应用于子孙节点&＃xff08;同时应用属性和UI&＃xff09;
expandInheritIncUI &＃61; function(node){if(node.isExpanded()){//若该节点已展开&＃xff0c;则将当前节点选中状态应用于该节点下所有子孙节点checkChilds(node);node.eachChild(function(child){expandInheritIncUI(child);});}else{var customfun &＃61; null;node.on("expand",customfun &＃61; function(){checkChilds(node);node.eachChild(function(child){expandChildsIncUI(child);});node.removeListener("expand",customfun,this);});node.expand();//展开当前节点子节点}
};//展开当前节点下所有子孙节点&＃xff0c;并将当前节点选中状态应用于子孙节点&＃xff08;只应用属性&＃xff09;
expandInherit &＃61; function(node){if(node.isExpanded()){//若该节点已展开&＃xff0c;则将当前节点选中状态应用于该节点下所有子孙节点checkChilds(node);node.eachChild(function(child){expandInherit(child);});}else{var customfun &＃61; null;node.on("beforeexpand",customfun &＃61; function(){checkChilds(node);node.eachChild(function(child){expandInherit(child);});node.removeListener("beforeexpand",customfun,this);});node.expand();//展开当前节点子节点}
};//将当前节点的选中状态&＃xff08;全选和未选&＃xff09;&＃xff0c;包括属性和UI应用于向下的所有&＃xff08;已加载&＃xff09;子孙节点
checkChildsIncUI &＃61; function(node){var checked &＃61; node.attributes.checked;var half &＃61; node.attributes.indeterminate;node.eachChild(function(child){if(Ext.isBoolean(half) && !half){//判断当前节点是否为半选&＃xff08;半选将不应用于子孙节点&＃xff09;child.attributes.checked &＃61; checked;child.ui.checkbox.checked &＃61; checked;child.attributes.indeterminate &＃61; half;child.ui.checkbox.indeterminate &＃61; half;}checkChilds(child);});
};//将当前节点的选中状态&＃xff08;全选和未选&＃xff09;&＃xff0c;只属性应用于向下的所有&＃xff08;已加载&＃xff09;子孙节点
checkChilds &＃61; function(node){var checked &＃61; node.attributes.checked;var half &＃61; node.attributes.indeterminate;node.eachChild(function(child){if(Ext.isBoolean(half) && !half){//判断当前节点是否为半选&＃xff08;半选将不应用于子孙节点&＃xff09;child.attributes.checked &＃61; checked;child.attributes.indeterminate &＃61; half;}checkChilds(child);});
};//选中当前节点时&＃xff0c;对向上的父节点选中状态进行处理
checkParent &＃61; function(tree,node){var parentNode &＃61; node.parentNode;//由于根节点隐藏且没有复选框&＃xff0c;所以当当前节点父节点为根节点时不再对父节点&＃xff08;根节点&＃xff09;进行选中状态处理if(tree.root.attributes.id !&＃61; parentNode.attributes.id){//父节点中子节点半选个数计数var halfcount &＃61; 0;//父节点中子节点选中个数计数var checkedCount &＃61; 0;//父节点中子节点数var childCount &＃61; parentNode.childNodes.length;parentNode.eachChild(function(child){if(child.attributes.indeterminate){halfcount&＃43;&＃43;;}else if(child.attributes.checked){checkedCount&＃43;&＃43;;}});if(checkedCount &＃61;&＃61; childCount){//若父节点中子节点已被全选&＃xff0c;则选中父节点parentNode.attributes.checked &＃61; true;parentNode.ui.checkbox.checked &＃61; true;parentNode.attributes.indeterminate &＃61; false;parentNode.ui.checkbox.indeterminate &＃61; false;}else if(halfcount > 0 || checkedCount > 0){//若父节点的部分子节点为选中或半选时&＃xff0c;父节点为半选状态parentNode.attributes.checked &＃61; true;parentNode.ui.checkbox.checked &＃61; true;parentNode.attributes.indeterminate &＃61; true;parentNode.ui.checkbox.indeterminate &＃61; true;}else{//若父节点中子节点未被全选&＃xff0c;则将父节点置为不选中parentNode.attributes.checked &＃61; false;parentNode.ui.checkbox.checked &＃61; false;parentNode.attributes.indeterminate &＃61; false;parentNode.ui.checkbox.indeterminate &＃61; false;}checkParent(tree,parentNode);}
};

这样&＃xff0c;当树中某节点被选中时&＃xff0c;向上和向下的节点处理就完成了。