zoukankan      html  css  js  c++  java
  • Layui当没有按钮权限时如何隐藏Table表格中的操作栏

    Layui 前端通过异步AJAX 调用接口将数据到Table中,代码如下:

    <div class="layui-form">
        <table id="table" lay-filter="menu"></table>
    </div>

    这里使用Layui结合Thymeleaf模板引擎渲染页面,其中permission变量是用户权限列表,由后台Java提供,如果做全后端分离,其原理也一样后台通过接口提供权限列表,代码如下:

    <script th:inline="javascript" type="text/html" id="bartool">
        <a th:if="${#lists.contains(permissions, 'admin:menu:edit')}" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>编辑
        </a>
        <a th:if="${#lists.contains(permissions, 'admin:menu:delete')}" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>删除
        </a>
    </script>

    当没有编辑、删除按钮权限的时候操作栏是空白的,比较难看,产品希望没有按钮权限的时候隐藏Table中的”操作栏“,于是通过Layui官网发现,cols中有个hide参数,可以控制列的显示,
    于是通过判断toolbar中是否有按钮来判断"操作栏"的动态显示,代码如下:

    <script th:inline="javascript" type="text/javascript" layout:fragment="footer">
        layui.use(['jquery', 'form', 'layer', 'table'], function()
        {
            var table = layui.table, $ = layui.jquery, search = window.location.search;
            var toolbar = $.trim($("#bartool").html())=="" ? true : false;
    
            table.render({
                elem: '#table',
                url: '/admin/menu/data' + search,
                limit: 15,
                page: true,
                toolbar: "#toolbar",
                defaultToolbar: [],
                cols: [[ //
                    {type: 'numbers', title: '序号', '5%'},
                    {field: 'menu_name', title: '菜单名称',   '10%'},
                    {field: 'url_type', title: '菜单类型', '10%', templet:
                    function (row)
                    {
                        if(row.url_type==1)
                        {
                            return "模块";
                        }
                        if(row.url_type==2)
                        {
                            return "菜单";
                        }
                        if(row.url_type==3)
                        {
                            return "按钮";
                        }
                    }},
                    {field: 'status', title: '状态', '15%', templet:
                    function (row) {
                        return row.status==1?"启用":"禁用";
                    }},
                    {field: 'url', title: '菜单路劲',   '15%'},
                    {field: 'sort', title: '排序',   '15%'},
                    {field: 'permission', title: '权限标识'},
                    {align: 'center', title: '操作', toolbar: '#bartool', hide: toolbar},
                ]]
            });
        });
    </script>
  • 相关阅读:
    ServletConfig对象
    Servlet生命周期
    BeanListHandler
    表单校验
    SQL30081N 检测到通信错误。正在使用的通信协议:"TCP/IP"
    交货单寄售发货接口
    PI 7.4/7.5 Alert 配置
    SAP PI soap 方式 头部 传输 wsse:Security wsse:UsernameToken
    smartforms 打印参数 ( 预览 和 不预览直接打印 )设置
    migo增强中获取屏幕值的方法
  • 原文地址:https://www.cnblogs.com/huxiaoguang/p/15069825.html
Copyright © 2011-2022 走看看