Extjs 4.2 树结点右键菜单（全选，反选，撤销)

分手后的思念是犯贱 2024-02-17 14:39 14阅读 0赞

自己写的最新版本extjs4.2的树结点的操作，记录一下，以后可能会用到。

var tree = new Ext.tree.TreePanel({
    		flex: 1,
    		animate: true,  
    		autoScroll: true,
    		anchor: '100% 93%',
    		store: new Ext.data.TreeStore({
    			root:{
    				expanded: true,
    				text:'A',
    				children:[{
    					expanded: true,
    					text:'1',
    					children:[{
    						text:'2',
    						icon:'sysimg/icon/image.gif',
    						leaf:true,
    						id:'1_1',
    						checked:false
    					},{
    						text:'3',
    						icon:'sysimg/icon/layout.gif',
    						leaf:true,
    						id:'1_2',
    						checked:false
    					},{
    						text:'4',
    						icon:'sysimg/icon/image_add.png',
    						leaf:true,
    						id:'1_3',
    						checked:false
    					},{
    						text:'5',
    						icon:'sysimg/icon/out.gif',
    						leaf:true,
    						id:'1_4',
    						checked:false
    					},{
    						text:'6',
    						icon:'sysimg/icon/leave.gif',
    						leaf:true,
    						id:'1_5',
    						checked:false
    					},{
    						text:'7',
    						icon:'sysimg/icon/preview_16x16.gif',
    						leaf:true,
    						id:'1_5',
    						checked:false
    					},{
    						text:'8',
    						icon:'sysimg/icon/upload.gif',
    						leaf:true,
    						id:'1_7',
    						checked:false
    					},{
    						text:'9',
    						icon:'sysimg/icon/users--exclamation.gif',
    						leaf:true,
    						id:'1_8',
    						checked:false
    					},{
    						text:'10',
    						icon:'sysimg/icon/Pixies_020.gif',
    						leaf:true,
    						id:'1_9',
    						checked:false
    					}]
    				},{
    					expanded: true,
    					text:'B',
    					children:[{
    						text:'11',
    						icon:'sysimg/icon/Pixies_023.gif',
    						leaf:true,
    						id:'2_1',
    						checked:false
    					},{
    						text:'12',
    						icon:'sysimg/icon/Pixies_017.gif',
    						leaf:true,
    						id:'2_2',
    						checked:false
    					}]
    				},{
    					expanded: true,
    					text:'C',
    					children:[{
    						text:'13',
    						icon:'sysimg/icon/users--arrow.gif',
    						leaf:true,
    						id:'3_1',
    						checked:false
    					},{
    						text:'14',
    						icon:'sysimg/icon/users.gif',
    						leaf:true,
    						id:'3_2',
    						checked:false
    					},{
    						text:'15',
    						icon:'sysimg/icon/hammer.gif',
    						leaf:true,
    						id:'3_3',
    						checked:false
    					},{
    						text:'16',
    						icon:'sysimg/icon/bandaid--arrow.gif',
    						leaf:true,
    						id:'3_4',
    						checked:false
    					},{
    						text:'17',
    						icon:'sysimg/icon/user_go.gif',
    						leaf:true,
    						id:'3_5',
    						checked:false
    					},{
    						text:'18',
    						icon:'sysimg/icon/cog.gif',
    						leaf:true,
    						id:'3_6',
    						checked:false
    					},{
    						text:'19',
    						icon:'sysimg/icon/publish.gif',
    						leaf:true,
    						id:'3_7',
    						checked:false
    					},{
    						text:'20',
    						icon:'sysimg/icon/users--exclamation.gif',
    						leaf:true,
    						id:'3_8',
    						checked:false
    					},{
    						text:'21',
    						icon:'sysimg/icon/user-black.gif',
    						leaf:true,
    						id:'3_9',
    						checked:false
    					},{
    						text:'22',
    						icon:'sysimg/icon/leaf.gif',
    						leaf:true,
    						id:'3_10',
    						checked:false
    					}]
    				}]
    			}
    		}),
    		listeners:{
    			'itemcontextmenu':function(menutree,record,items,index,e){
    				e.preventDefault();
    				e.stopEvent();
    				//判断是否为叶子结点
    				if(record.data.leaf==false){
    				var nodemenu = new Ext.menu.Menu({
    					floating:true,
    					items:[{
    						text:'全选',
    						handler:function(){
    							for( var i =0;i<record.data.children.length;++i){
    								//设置结点checked属性为true
    								record.childNodes[i].set('checked',true);	
    							}
    						}
    					},{
    						text:'反选',
    						handler:function(){
    							for( var i =0;i<record.data.children.length;++i){
    								if(record.childNodes[i].data.checked == false) {
    									//设置结点checked属性为true
    									record.childNodes[i].set('checked',true)}
    								else {
    									//设置结点checked属性为true
    									record.childNodes[i].set('checked',false);	
    								}	
    							}
    						}
    					},{
    						text:'撤销全部',
    						handler:function(){
    							for( var i =0;i<record.data.children.length;++i){
    								//设置结点checked属性为false
    								record.childNodes[i].set('checked',false);	
    							}
    						}
    					}]
    					
    				});
    				nodemenu.showAt(e.getXY());
    				}
    			}
    		}
    	});

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）

首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。

缺乏、安全感/ 2024年04月22日 22:30/ 0 赞/ 115 阅读

相关 Extjs 4.2 树结点右键菜单（全选，反选，撤销)

自己写的最新版本extjs4.2的树结点的操作，记录一下，以后可能会用到。 var tree = new Ext.tree.TreePanel({ fle

分手后的思念是犯贱/ 2024年02月17日 14:39/ 0 赞/ 15 阅读

相关 javascript全选、反选

<!DOCTYPE html> <html> <head> <title>test</title> </head> <body

谁借莪１个温暖的怀抱￠/ 2022年12月29日 00:15/ 0 赞/ 212 阅读

相关 javascript--全选、取消全选、反选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

快来打我*/ 2022年09月21日 13:26/ 0 赞/ 267 阅读

相关 Dom 全选全不选反选

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

桃扇骨/ 2022年06月11日 00:06/ 0 赞/ 303 阅读

相关全选与反选

1、js全选与反选： function checkallEvent()\{ var ck1 = document.getElementById("

待我称王封你为后i/ 2022年06月03日 06:59/ 0 赞/ 221 阅读

相关 js全选/全不选/反选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

迷南。/ 2022年05月13日 10:08/ 0 赞/ 306 阅读

相关 laravel 全选反选

给input设置一个class <input type="checkbox" class="all"> @foreach($info as $v)

柔情只为你懂/ 2022年03月22日 11:12/ 0 赞/ 302 阅读

相关全选、反选

//全选 function selectall(_obj,_obj1,_objv,_objv1){ var fg = _obj1.value == _objv?

我就是我/ 2022年01月05日 06:11/ 0 赞/ 403 阅读

相关全选-反选-全不选

简单易懂，上手快 $(function() \{ //全选 $("\all").click(function()

绝地灬酷狼/ 2021年10月03日 02:48/ 0 赞/ 579 阅读