提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

easyui_动态添加隐藏toolbar按钮

EasyUI 添加 动态 按钮 隐藏 ToolBar
2023-09-11 14:21:36 时间
目标：动态添加隐藏toolbar，比如根据权限动态显示新增、修改、删除按钮等

思路：先初始化toolbar的所有按钮，加载datagrid其它信息，再根据权限显示隐藏toolbar按钮

步骤：
1、加载步骤
1
2
3
4
5
$(function() {
    easyToolbarInit();     //初始化toolbar按钮
    easyInitGrid({title:"管理",url:"/sa/add"});  //加载datagrid其它信息，如列等
    easyToolbarDisplay();  //根据权限显示/隐藏 toolbar按钮  张         
});


2、初始化toolbar按钮(按钮的id为后面使用的标识信息，这里最好用完整信息，防止和其它id冲突​)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//初始化toolbar按钮
function easyToolbarInit() {
     
    $('#grid').datagrid({
        toolbar : [ {
            id : 'add',    
            text : '添加',
            iconCls : 'icon-add',
            height : 50,
            handler : function() {
                gridAdd();
            }
        }, '-', {
            id : 'delete',
            text : '删除',
            iconCls : 'icon-remove',
            height : 50,
            handler : function() {
                gridDelete();
            }
        } ]
    });
}

3、加载datagrid其它信息


4、根据权限显示/隐藏 toolbar按钮  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function easyRightDisplay() {
    //获取所有的toolbar按钮
    var button=$('div.datagrid div.datagrid-toolbar a');
    for (var i = 0; i < button.length; i++) {
        var toolbar = button[i];
        var id = toolbar.id;
        if (id == "add") {  //隐藏Id为add的按钮
            $('div.datagrid div.datagrid-toolbar a').eq(i).hide();
        }
        if (id == "delete") {  //不隐藏id为delete的按钮
            //button.eq(i).hide();
        }
        //如果按钮都没权限，隐藏了可直接隐藏toolbar
        //$('div.datagrid div.datagrid-toolbar').hide();
    }





相关文章