- 所有代码文末附上
功能介绍：
- 首先将所有按钮隐藏掉，因为我的项目涉及到三种按钮：普通按钮（即单独封装的按钮） ，特殊按钮（*右键菜单按钮，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'));
}
}
]
}
权限分配：最后我们可以在权限组中分配按钮，达到前台按钮动态分配的效果
