templet 格式化表格数据
方法一
在需要图片展示的 td 代码渲染的最后,添加 templet : '#id'
用此方法,在某些特殊接口,可能会拿不到数据,建议第二种方法
js - html模板:
<script type="text/html" id="img">
<div><img src= url style="width: 30px; height: 30px;"></div>
</script>
js - layui - table:
cols: [
[
{field:'categoryId', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
,{field:'categoryName', width:120, title: '名称'}
,{field:'categoryIcon', width:120, title: '图标',templet:'#img'}
,{field:'createTime', width:120, title: '时间'}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]
]
方法二
在需要图片展示的 td 代码渲染的最后,添加 templet : 函数名
用函数的方法,比用script模板申明要灵活很多
js - layui - table:
cols: [
[
{field:'categoryId', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
,{field:'categoryName', width:120, title: '名称'}
,{field:'categoryIcon', width:120, title: '图标',templet:img}
,{field:'createTime', width:120, title: '时间'}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]
]
js - function
// 表格格式化 - img 渲染
function img(cellvalue) {
console.log(cellvalue);
return "<img src='" + cellvalue.categoryIcon + "' height=\"30\" width=\"30\" alt='icon'/>";
}