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: '操作', width: 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: '操作', width: 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

猜你喜欢

转载自www.cnblogs.com/hhuiii/p/12711303.html