layui的表格渲染图片

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'/>";
      }

欢迎关注我的公众号：码上学习鸭