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: '序號', 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>