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>