easyui_动态添加隐藏toolbar按钮

最新推荐文章于 2022-04-20 09:12:34 发布

weixin_34357267

最新推荐文章于 2022-04-20 09:12:34 发布

阅读量362

点赞数

文章标签： javascript ViewUI

目标：动态添加隐藏toolbar，比如根据权限动态显示新增、修改、删除按钮等

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

步骤：

1、加载步骤

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

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

 
         //初始化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按钮

 
         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(); 
        
         }