• Layui数据表格动态加载操作按钮


    效果:

     方法一:绑定模版选择器

    <div class="layui-card">
        <div class="layui-card-body layui-row layui-col-space10">
            <table class="layui-hide" id="deliveryTable" lay-filter="deliveryTable"></table>
            <script type="text/html" id="delivery-table-operate">
                <a class="layui-btn layui-btn-xs" lay-event="edit">备注</a>
                {{#  if(d.EnclosureUrl != ''){ }}
                <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="download">下载简历</a>
                {{#  } }}
            </script>
        </div>
    </div>
    table.render({
                    elem: '',
                    id: '',
                    height: '',
                    url: '', //数据接口,
                    method: 'post',
                    defaultToolbar: ['filter', 'exports', 'print'],
                    toolbar: false,
                    page: {
                        limit: 10,
                        limits: [10, 20, 30]
                    },
                    parseData: function (res) { //res 即为原始返回的数据
                       
                    },
                    cols: [[ 
                        { align: 'center', title: '操作',  180, toolbar: '#delivery-table-operate' }
                    ]]
                });

    方法二:函数转义( layui 2.2.5及以上)

    table.render({
                    elem: '',
                    id: '',
                    height: '',
                    url: '', //数据接口,
                    method: 'post',
                    defaultToolbar: ['filter', 'exports', 'print'],
                    toolbar: false,
                    page: {
                        limit: 10,
                        limits: [10, 20, 30]
                    },
                    parseData: function (res) { //res 即为原始返回的数据
                       
                    },
                    cols: [[ 
                        { align: 'center', title: '操作',  180, templet: OnloadTool }
                    ]]
                });
    function OnloadTool(data) {
       let htmls = '<a class="layui-btn layui-btn-xs" lay-event="edit">备注</a>';
       if (data.EnclosureUrl != '') {
           htmls += '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="download">下载简历</a>';
       }
       return htmls;
    }

    官方文档:https://www.layui.com/doc/modules/table.html#templet

  • 相关阅读:
    位运算符设置权限
    urlencode、urldecode、rawurlencode、rawurldecod
    二分查找法的mid值 整数溢出问题
    GIT 常用命令
    nginx配置反向代理转发
    PHP实现无限极分类
    PHP面试题目整理(持续更新)
    去除input的默认样式
    git 常用指令
    数组去重
  • 原文地址:https://www.cnblogs.com/hhuiii/p/12711303.html
Copyright © 2020-2023  润新知