easyui的tab组件的权限控制

最新推荐文章于 2024-06-02 18:25:47 发布

太空漫步11

最新推荐文章于 2024-06-02 18:25:47 发布

阅读量551

点赞数 22

文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/zhourongxiang1/article/details/138806970

版权

目标

我要实现的效果是不同角色用户能够操作的tab不一样

技术选型

beetl、easyui

页面

在这里插入图片描述
角色1的tab2被禁用

在这里插入图片描述
角色2的tab3被禁用

代码

@RequestMapping("/combotreegrid")
    public String combotreegrid(String roleName,Model model){
        List<Integer> disabledNum=new ArrayList<>();
        if("角色2".equals(roleName)){
            disabledNum.add(2);
        }else{
            disabledNum.add(1);
        }
        model.addAttribute("disableNum",disabledNum);
        return "easyui/combotreegrid.html";
    }

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
    <div title="Tab1" style="padding:20px;display:none;">
        tab1
    </div>
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
        tab2
    </div>
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
        tab3
    </div>
</div>

<script>
    $('#tt').tabs({
        border:false,
        onSelect:function(title){
        }
    });
    <% for(num in disableNum){ %>
        $('#tt').tabs('disableTab', ${num});
    <%}%>

</script>