ExtJS异步加载树节点（权限管理）

先在前台ExtJS页面中：
GridPanel中显示所有用户信息：

var userGrid = new Ext.grid.GridPanel({
			   id:'userGrid',
			   title : '用户信息表',
			   region : 'center',
			   minColumnWidth : 50,
			   enableDragDrop : true, //允许拖拽！
		       ddGroup: "DDSource",
			   loadMask : {msg:'正在加载数据，请稍侯...'},
			   store : userStore,
			   sm : sm,
			   cm : cm,
			   viewConfig : {
			     forceFit : false
			   },
			   bbar : pageToolBar
			});

新建一颗树：

var userRole_treepanel = new Ext.tree.TreePanel({
				id : "userRole_treepanel",
				title : '用户权限',
				width : 200,
				region : 'east',
				collapseMode :'mini',
				collapsible : true,
				lines: true,
				enableDD : true,//允许拖拽
		        ddGroup: "DDSource",//拖拽分组
				autoScroll:true,
				rootVisible : true,
				loader : treeLoader,
				root : tree_root
			});

注册树节点展开前事件，在展开前异步加载数据：

//树节点展开前事件
userRole_treepanel.on("beforeexpandnode",function(node){
	var id = node.id;
	if (id != "tree_root" && (node.hasChildNodes() == "" || node.firstChild == null)){
		Ext.Ajax.request({
			url : "getChildNode_userRole",
			params : {roleId:id},
			success : function(response, opts){
				var child = Ext.decode(response.responseText);
				node.appendChild(child);
				if (temp != null){
					ddFunction(node, null, temp.selections);
					temp = null;
				}
				if(sourceRole != null && sourceUser != null){
					appendNode(node,sourceUser,sourceRole);//把数据加进该节点的子节点
					sourceRole = null;
					sourceUser = null;
				}
			},
			failure : function(response,opts){
				
			}
		})
	}
});

权限从树拉响gridpanel实现删除权限功能：

//响应权限从树拉向gridpanel实现删除！
userRole_treepanel.on("afterrender",function(){
	var dd = new  Ext.dd.DropTarget("userGrid",{
		ddGroup:"DDSource",
		notifyDrop  : function(ddSource, e, data){
			Ext.MessageBox.confirm("提示","确定删除用户【"+data.node.text+"】的【"+data.node.parentNode.text+"】权限？",function(id){
        		if("yes" == id){
        			var role_id = data.node.parentNode.id;
                    var user_id = data.node.id;
                    user_id = user_id.substring(user_id.indexOf("@")+1,user_id.length);
                    Ext.Ajax.request({
                    	url : "deleteUserRole_userRole",
                    	params : {roleId:role_id,userId:user_id},
                    	success : function(response,opts){
                    	},
                    	failure : function(response, opts){
                    	
                    	}
                    })
                    data.node.remove();
        		}
        	});
		}

	})
});

增加权限：

//增加权限！ 
userRole_treepanel.on("beforenodedrop",function(dropEvent){
	var node = dropEvent.target; // 目标结点
    var data = dropEvent.data;  // 拖拽的数据
    var point = dropEvent.point; // 加入到目标结点的位置方式append,above,below
    if (node.id == 'tree_root'){
    	dropEvent.cancel =true;
    	return false;	                
    } 
    if (node.parentNode.id == 'tree_root' && point != 'append') {
        return false; 
    }
    if (!data.node) { //如果data.node为空，不是tree本身的拖拽，而是从grid到tree的拖拽，需要处理
        switch (point) {
            case 'append': // 添加时，目标结点为node，子结点设为空。这时需要判断该节点是否已经从后台异步获取数据
		        if ((node.hasChildNodes() == "" || node.firstChild == null) && !node.isExpanded()){
		        	temp = data;
		        	node.expand();
		        }else{
		        	if (!node.isExpanded()){
		        		node.expand();
		        	}
		        	ddFunction(node, null, data.selections);
		        }
			   	break;
            case 'above': 
                ddFunction(node.parentNode, node, data.selections);
                break;
            case 'below': 
                ddFunction(node.parentNode, node.nextSibling, data.selections);
                break;
        }
    }else {//树节点本身之前的拖动
    	var isok = true;
		var source_user_node = data.node;
		var source_user_id = data.node.id.substring(data.node.id.indexOf("@")+1,data.node.id.length);
    	var source_role_id = data.node.parentNode.id;
    	var target_role_id;
    	if(point == 'append') {
    		if ((node.hasChildNodes() == "" || node.firstChild == null) && !node.isExpanded()){
	        	node.expand();
	        	sourceRole = data.node.parentNode;
	        	sourceUser = source_user_node;
	        	return false;
	        }else{
	        	if (!node.isExpanded()){
		        		node.expand();
		        }
		        target_role_id = node.id;
        		node.eachChild(function(child){
                    if(source_user_id == child.id.substring(child.id.indexOf("@")+1,child.id.length)){
                    	Ext.MessageBox.alert("提示",  "不能重复为用户：【"+data.node.text+"】添加【"+node.text+"】权限！");
                    	isok = false;
                    }
                });
            	if (isok){
            		Ext.Msg.confirm("提示","您确定要更改用户【"+data.node.text+"】的权限为【"+node.text+"】？",function(btn){
            			if ("yes" == btn){
                			node.appendChild(new Ext.tree.TreeNode({id:source_user_id,text:source_user_node.text,leaf:true}));
                			source_user_node.remove();
                        	ajaxRequest(source_user_id,source_role_id,target_role_id,"update");//更新数据库，update user_role set user_id = source_user_id,role_id = target_role_id where user_id = source_user_id and role_id = source_role_id
            			}else return false;
            		});
            		return false;
            	}else return false;
	        }
    	}else{
    		target_role_id = node.parentNode.id;
    		node.parentNode.eachChild(function(child){
                if(source_user_id == child.id.substring(child.id.indexOf("@")+1,child.id.length)){
                	Ext.MessageBox.alert("提示", "不能重复为用户【"+data.node.text+"】添加【"+node.parentNode.text+"】权限！");
                	isok = false;
                }
            });
            if (isok){
            	Ext.Msg.confirm("提示","您确定要更改用户【"+data.node.text+"】的权限为【"+node.parentNode.text+"】？",function(btn){
            		if ("yes" == btn){
                		node.parentNode.appendChild(new Ext.tree.TreeNode({id:source_user_id,text:source_user_node.text,leaf:true}));
            			source_user_node.remove();
                    	ajaxRequest(source_user_id,source_role_id,target_role_id,"update");//更新数据库update
            		}else return false;
            	});
            	return false;
            }else return false;
    	}
    }
});

评论

1 楼 kimmking 2011-06-28  

发错地方了。