Layui按钮动态展示

Layui常用总结

❤️Layui常用总结2021（❤️建议收藏❤️！）_李布斯·大魔王的博客-CSDN博客

 

一、列表页barDemo

layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: ctxPath + 'demo/select'
            , toolbar: '#toolbarDemo'
            , title: '信息列表'
            , ellMinWidth: 250
            , cols: [
                [
                    {title: 'ID', width: 80, fixed: 'left', unresize: true, type: 'numbers'}
                    , {field: 'id', width: 80, fixed: 'left', hide: true}
                    , {field: 'aa', title: 'aa', width: 500}
                    , {field: 'bb', title: 'bb', width: 300}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150, align: 'center'}
                ]
            ]
            , page: true
            , id: 'reload'

        });

二、Layui按钮动态展示

<script type="text/html" id="barDemo">
     <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

     {{#  if(d.deleted ==0){  }}
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
     {{# }else{  }}
     <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="recover">恢复</a>
     {{# }  }}
</script>

三、效果

有用请点赞，养成良好习惯！

疑问、交流、鼓励请留言！