浏览 9381 次
|
锁定老帖子 主题：ExtJS异步加载树节点（权限管理）
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (3)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-06-28
最后修改：2011-06-30
先在前台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;
}
}
});
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-06-28
发错地方了。
|
| 返回顶楼 | |
|
发表时间：2011-07-01
感觉可能存在数据同步问题，比如“树节点展开前事件”。“前”。
|
| 返回顶楼 | |
|
发表时间：2011-07-01
怎么不发一个完整的案例~~~~
|
| 返回顶楼 | |
|
发表时间：2011-07-12
cnyangqi 写道 感觉可能存在数据同步问题，比如“树节点展开前事件”。“前”。
这个方案主要是实现数据异步加载的，如树节点没有展开前，这颗树是没有节点的，所以在拖拉用户添加到这个权限时，在添加之前先从后台加载该权限下所以用户，前台使用js进行判断，以实现异步加载 |
| 返回顶楼 | |
|
发表时间：2011-07-12
310628570 写道 怎么不发一个完整的案例~~~~
这部分功能，主要的是在前台逻辑，如何处理异步加载后台数据。所以我没有发后台代码。 |
| 返回顶楼 | |
