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; }

浙公网安备 33010602011771号