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

本文标题为:Layui数据表格动态加载操作按钮

基础教程推荐