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: '序号', width:'5%'},
                {field: 'menu_name', title: '菜单名称',  width: '10%'},
                {field: 'url_type', title: '菜单类型', width:'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: '状态', width:'15%', templet:
                function (row) {
                    return row.status==1?"启用":"禁用";
                }},
                {field: 'url', title: '菜单路劲',  width: '15%'},
                {field: 'sort', title: '排序',  width: '15%'},
                {field: 'permission', title: '权限标识'},
                {align: 'center', title: '操作', toolbar: '#bartool', hide: toolbar},
            ]]
        });
    });
</script>