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>
  • 相关阅读:
    leetcode108 Convert Sorted Array to Binary Search Tree
    leetcode98 Validate Binary Search Tree
    leetcode103 Binary Tree Zigzag Level Order Traversal
    leetcode116 Populating Next Right Pointers in Each Node
    Python全栈之路Day15
    Python全栈之路Day11
    集群监控
    Python全栈之路Day10
    自动部署反向代理、web、nfs
    5.Scss的插值
  • 原文地址:https://www.cnblogs.com/huxiaoguang/p/15069825.html
Copyright © 2011-2022 走看看