Ext的treepanel 没有自带checkbox级联选择效果,因为用得着,所以自己动手写了个, 现将代码分享一下, 欢迎批评指正。
由于我在改变节点复选框的选中状态后没有调用其onCheckChange()方法, 所以在获取已选中的节点时不能使用tree.getSelected()方法. 于是自己也相应为自己的级联添加了getSelected()方法.代码是用editplus写的, 没有用IDE, 为节省功夫, 注释不是很规范, 请见谅.
下面是测试代码:
1 Ext.onReady(function(){ 2 var root=new Ext.tree.TreeNode({ 3 text:"root", 4 id:"root", 5 checked:false 6 }); 7 var tree=new Ext.tree.TreePanel({ 8 renderTo:Ext.getBody(), 9 width:200, 10 root:root, 11 listeners:{ 12 "checkchange": function(node){ 13 cascadeCheck(node); 14 } 15 }, 16 buttons:[{ 17 text:"显示已选", 18 handler:function(){ 19 var selected=getSelected(root); 20 //alert(selected.length); 21 } 22 }] 23 }); 24 25 for(var first=0;first<3;first++){ 26 var flNode=new Ext.tree.TreeNode({ 27 text:"第一级目录_"+first, 28 id:"first_level_"+first, 29 checked:false 30 }); 31 root.appendChild(flNode); 32 33 for(var second=0;second<3;second++){ 34 var slNode=new Ext.tree.TreeNode({ 35 text:"第二级目录_"+first+"_"+second, 36 checked:false, 37 id:"second_level_"+first+"_"+second 38 }); 39 flNode.appendChild(slNode); 40 41 for(var third =0;third<3;third++){ 42 var tlNode=new Ext.tree.TreeNode({ 43 text:"第三级目录_"+first+"_"+second+"_"+third, 44 id:"third_level_"+first+"_"+second+"_"+third 45 }); 46 } 47 } 48 } 49 50 tree.expandAll(); 51 52 }); 53 54 55 function cascadeCheck(node){ 56 //调用函数改变子孙节点的状态 57 changeChildrenStatus(node,isChecked(node)); 58 59 //调用函数改变祖先节点的状态 60 changeParentStatus(node); 61 62 //函数: 改变改变子孙节点的状态 63 function changeChildrenStatus(node,checked){ 64 if(node.hasChildNodes()){ 65 node.eachChild(function(child){ 66 changeChildrenStatus(child,checked); 67 }); 68 } 69 node.ui.checkbox.checked=checked; 70 } 71 72 //函数: 改变祖先节点的状态 73 function changeParentStatus(node){ 74 var parent=node.parentNode; 75 if(!parent){ 76 return ; 77 } 78 79 var siblings=getSiblings(node); 80 81 var checked=true; 82 for(var i=0;i<siblings.length;i++){ 83 if(!isChecked(siblings[i])){ 84 checked=false; 85 } 86 } 87 88 setChecked(parent, checked); 89 changeParentStatus(parent); 90 } 91 92 //函数:得到节点的兄弟节点 93 function getSiblings(node){ 94 var siblings=[]; 95 var parent=node.parentNode; 96 if(parent){ 97 parent.eachChild(function(sibling){ 98 siblings.push(sibling); 99 }); 100 } 101 return siblings; 102 } 103 } 104 105 //如果节点前的checkbook已被选中, 返回true, 否则返回false 106 function isChecked(node){ 107 return node.ui.checkbox.checked; 108 } 109 110 //将节点前的checkbook的选中状态设为checked 111 function setChecked(node, checked){ 112 node.ui.checkbox.checked=checked; 113 } 114 115 //得到一个节点下所有被选中的节点, 返回值为一节点数组 116 function getSelected(root){ 117 var selected=[]; 118 119 if(isChecked(root)){ 120 selected.push(root); 121 } 122 123 root.eachChild(function(child){ 124 selected=selected.concat(getSelected(child)); 125 }); 126 127 return selected; 128 }