
layui中table根据数据不同渲染不同toolbar
这是按钮模板代码,根据status不同渲染不同工具栏。
·
这是按钮模板代码,根据status不同渲染不同工具栏
<script type="text/html" id="btnBar">
{{# if(d.status === 'active') { }}
<a class="layui-btn layui-btn-xs" lay-event="wuZiKu-ready">准备完毕</a>
{{# } else if(d.status === 'inactive') { }}
<a class="layui-btn layui-btn-xs layui-btn-disabled" lay-event="wuZiKu-ready">准备完
</a>
{{# } }}
</script>
这是表格代码
let wuZiKuData = [
{
id: 1,
sign: '1',
name: '物资库1',
status: 'active'
},
{
id: 2,
sign: '2',
name: '物资库2',
status: 'inactive'
},
{
id: 3,
sign: '3',
name: '物资库3',
status: 'active'
}
]
table.render({
elem: '#wuZiKu-table',
css: [
'.layui-table-page{text-align: center;}' // 让分页栏居中
].join(''),
cols: [
[
//标题栏
{ field: 'id', hide: true },
{ field: 'sign', title: '编号' },
{ field: 'name', title: '名称' },
{ title: '操作', toolbar: '#btnBar' }
]
],
data: wuZiKuData,
page: true,
limits: [2],
limit: 2
})
就这样啦

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐
所有评论(0)