- 所有代码文末附上
功能介绍:
- 首先将所有按钮隐藏掉,因为我的项目涉及到三种按钮:普通按钮(即单独封装的按钮) ,特殊按钮(*右键菜单按钮,actioncolumn 按钮),所以按钮对应的隐藏跟禁用方式也不同。然后通过项目中的权限模块为角色开放对应的按钮,当用户登录时,把分配到的按钮处理为显示或者启用状态。 从而达到按钮权限控制的效果。 下文将着重介绍特殊按钮的处理。
注:本文属于个人工作时遇到的问题,特此记录下来。文笔有限,如有不妥希望各位小伙伴能及时指正。 QQ:1113905744(随时在线)
效果图:
- 右键菜单按钮权限:灰色按钮(未分配,不能点击) 彩色按钮(已分配)
- actioncolumn 中按钮权限 :灰色按钮(未分配,不能点击) 彩色按钮(已分配)
说明:
- 请求后台接口函数:
<1> 返回的数据包含菜单跟按钮,这里用于筛选所有按钮。
<2>将所有按钮传到一个数组中,特殊按钮(右键菜单按钮,actioncolumn 中的按钮)需要在此数组中特殊处理
<3>普通按钮可以直接显示,特殊按钮会报错。
<4>第三步会有未匹配到的按钮报错,这里需要抛出异常
2. 调用方式:
<1>引入上图JS
<2>调用函数
- 右键菜单按钮权限截图:
<1>按钮事件,右键菜单类型按钮必须要有此事件
<2>请求后台接口函数中封装的数组
4. actioncolumn 中按钮权限截图
实现代码:
- 请求后台函数:
var buttonArr = [];
//按钮级别权限控制
function controlToolButtons() {
Ext.Ajax.request({
async: false,
url : getServerHttp() + "/1111111111111,//请求按钮的权限地址
callback : function(options,success,response){//回调函数
//后台返回该为该用户分配的所有按钮
var btnJSONArr= Ext.JSON.decode(response.responseText);
Ext.each(btnJSONArr, function(el) {
if(el.menu_code.substr(0,3) =='001'){
try {
var temp = String(el.menu_code);
buttonArr.push(temp);
Ext.getCmp(temp).show();
} catch(err) {
//后台返回的数组中匹配不到前台的按钮,所以要捕获异常
console.log("存在未匹配到的按钮");
}
}
});
}
});
}
function getAdult(buttonArr){
}
- 右键菜单按钮权限
listeners : {
itemcontextmenu : function(view, rec, node, index, e) {
e.stopEvent();
e.preventDefault();
// 添加一个节点(叶子)
var chlidNodeClickMenu = Ext.create('Ext.menu.Menu', {
items : [ {
text : '查看详情',
disabled:true,
icon : jcapp.getIcon("vcard_edit.png"),
listeners: {
afterRender:function(btn, obj, eOpts){
if (buttonArr.includes('001003001002') ) {
btn.setDisabled ( false);
}
}
},
handler : function() {
myEdit1(rec.get('kid'));
}
},{
text : '新增子节点',
disabled:true,
icon : jcapp.getIcon("add.png"),
listeners: {
afterRender:function(btn, obj, eOpts){
if (buttonArr.includes('001003001003') ) {
btn.setDisabled ( false);
}
}
},
handler : function() {
myAdd(rec.get("id"));
}
},
{
text : '修改该节点',
disabled:true,
icon : jcapp.getIcon("vcard_edit.png"),
listeners: {
afterRender:function(btn, obj, eOpts){
if (buttonArr.includes('001003001004') ) {
btn.setDisabled ( false);
}
}
},
handler : function() {
myEdit(rec.get('kid'));
}
}, {
text : '删除该节点',
disabled:true,
icon : jcapp.getIcon("vcard_delete.png"),
listeners: {
afterRender:function(btn, obj, eOpts){
if (buttonArr.includes('001003001005') ) {
btn.setDisabled ( false);
}
}
},
handler : function() {
myDel(rec.get('kid'));
}
} ]
});
//menu的showAt,不要忘记
chlidNodeClickMenu.showAt(e.getPoint());
return false;
},
}
- actioncolumn 中按钮权限
{xtype : "actioncolumn",align : "center",text : '操作',id: '001001002009',
items : [
{xtype : 'button',tooltip : '编辑',icon : jcapp.getIcon("application_form_edit.png"),
isDisabled: function (view, rowIndex, colIndex, item, rec) {
if (buttonArr.includes('001001002003') ) {
return false; //显示
}else {
return true; //禁用
}
},
handler : function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
myEdit(rec.get('kid'));
}
},
{xtype : "container"},
{xtype : 'button',tooltip : '删除',icon : jcapp.getIcon("cross.png"),
isDisabled: function (view, rowIndex, colIndex, item, rec) {
if (buttonArr.includes('001001002002') ) {
return false; //显示
}else {
return true; //禁用
}
},
handler : function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
myDel(rec.get('kid'));
}
}
]
}