extjs treePanel checkBox级联

小灰灰 2022-08-08 06:17 145阅读 0赞

效果图：点击父级，全选/取消全部子级别，点击子级别（递归判断父级是否应该被选中）

![Center][]

{
    	title: '菜单测试',
    	xtype:'treepanel',
    	id:'treeMenuId',
    	width: 200,
    	height:300,
    	store: leftTreeStore,
    	hideHeaders: true,
    	rootVisible: true,
    	useArrows: true,
    	listeners:{
    	  	checkchange:function(node,checked,obj){
    			node.cascadeBy(function (n) {//子节点随父节点状态的改变而改变
    				n.set('checked', checked); 
    			});
    			checkParent(node);//父节点状态的判断
    			function checkParent(node){
    				node = node.parentNode;
    				if(!node) return;//如果是父节点，则停止递归
    				var checkP=false;
    				node.cascadeBy(function (n){
    					if (n != node) {
    						if (n.get('checked') == true) {
    							checkP = true;//如果有一个子节点是选中状态，则父节点也为选中状态
    						}
    					}
    				});
    				node.set('checked', checkP);
    				checkParent(node);//递归
    			}
    		}
    	},
    	dockedItems: [{
    		xtype: 'toolbar',
    		items: {
    			text: '获取选择值',
    			handler: function(){
    				var records = Ext.getCmp("treeMenuId").getView().getChecked(),
    				names = [];
    				Ext.Array.each(records, function(rec){
    					//console.log(rec.raw.menuId);
    					names.push(rec.get('text'));
    				});
    				Ext.MessageBox.show({
    					title: 'Selected Nodes',
    					msg: names.join(''),
    					icon: Ext.MessageBox.INFO
    				});
    			}
    		}
    	}]
    }

转载自：[http://blog.sina.com.cn/s/blog\_6dc1452201019trh.html][http_blog.sina.com.cn_s_blog_6dc1452201019trh.html]

[Center]: /images/20220805/59b7a74607904149b734b05570969e02.png
[http_blog.sina.com.cn_s_blog_6dc1452201019trh.html]: http://blog.sina.com.cn/s/blog_6dc1452201019trh.html