huxiaoguang

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>

 

分类:

技术点:

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-09-11
  • 2022-02-25
猜你喜欢
  • 2021-10-22
  • 2021-10-03
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-10-22
相关资源
相似解决方案