Layui数据表格渲染图片显示出来3种方法

用过Layui的都知道，Layui数据表格渲染方式有三种：方法渲染、自动渲染、转换静态表格，我用得比较多的就是方法渲染与自动渲染，不管我们用哪种渲染方法？以下讲的内容都是通用的，因此，大家没必要担心，原理都是一样的。

今天由于Layui数据表格需要显示出图片出来，默认的情况下显示出来的只有一个图片路径，因此我们需要用上Layui自带的templet - 自定义列模板，具体操作如下：

操作前，先给大家看下最终Layui数据表格渲染图片显示出来的效果：

第一种方法：绑定模版选择器，field 那里 添加 templet : '#id'

以下两种代码都是需要的，少 一种都是不行的，据说：用此方法，在某些特殊接口，可能会拿不到数据，因此推荐大家用第二种方法。

1、layui - table 渲染代码：

例如，以我这为例子，我只要在需要图片展示的 td 代码渲染的最后，添加 templet : '#img'

{field:'id', title: 'ID', sort: true,align: 'center'}
 ,{field:'sort', title: '排序', sort: true,align: 'center'}
 ,{field:'name', title: '模块名称',align: 'center'}
 ,{field:'create_time', title: '创建时间', minWidth: 150,align: 'center',}
 ,{field:'urls', title: '图标', minWidth: 150,align: 'center',templet:'#img'}
 ,{fixed: 'right', width:250,align:'center', toolbar: '#barDemo'}

2、前端模板html代码：

<script type="text/html" id="img">
    <img src="{{d.urls}}" style="" width="28" height="21" alt="">
</script>

完整代码示例：

<script>
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#test'
            ,url:'/admin/gis/modukarlist/'
            ,cellMinWidth: 80
            ,cols: [[
                {field:'id', title: 'ID', sort: true,align: 'center'}
                ,{field:'sort', title: '排序', sort: true,align: 'center'}
                ,{field:'name', title: '模块名称',align: 'center'}
                ,{field:'create_time', title: '创建时间', minWidth: 150,align: 'center',}
                ,{field:'urls', title: '图标', minWidth: 150,align: 'center',templet:'#img'}
                ,{fixed: 'right', width:250,align:'center', toolbar: '#barDemo'}
            ]]
            ,page: true
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'edit'){
                url = "/admin/gis/modularedit/id/"+data.id;
                window.location.href = url;
            }else if(layEvent === 'del'){
                $.ajax()
            }
        });
    });
</script>
<script type="text/html" id="img">
    <div><img src="{{d.urls}}" style="" width="28" height="21" alt=""></div>
</script>

第二种方法：函数转义，field 那里  添加 templet：函数

1、layui - table 渲染代码：

在需要图片展示的 td 代码渲染的最后，添加 templet : 函数名  

用函数的方法，比用script模板申明要灵活很多

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

2、前端模板JavaScript代码：

<script type="text/javascript">
       // 表格格式化 - img 渲染
      function img(cellvalue) {
        //console.log(cellvalue);
        return "<img src='" + cellvalue.categoryIcon+ "' height=\"28\" width=\"21\" alt='icon'/>";
  }
</script>

第三种方法：field 那里 直接赋值模版字符

事实上，templet 也可以直接是一段 html 内容，如：

templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
注意：这里一定要被一层 <div></div> 包裹，否则无法读取到模板

注意：

如果遇到：layui图片显示不出来，确保自己代码没问题的情况下，请看下图片路径是否正确？

如果遇到：layui图片显示不全或图片显示过大，请自己调整图片的宽度与高度。

总结：

templet - 自定义列模板，templet 提供了三种使用方式，请结合实际场景选择最合适的一种：

如果自定义模版的字符量太大，我们推荐你采用第一种【绑定模版选择器】；

如果自定义模板的字符量适中，或者想更方便地调用外部方法，我们推荐你采用第二种【函数转义】；

如果自定义模板的字符量很小，我们推荐你采用第三种【直接赋值模版字符】

具体请查看手册：https://www.layui.com/doc/modules/table.html#templet