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

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

 

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

 

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

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

    A+
发布日期:2021年03月15日 12:34:37  所属分类:Layui
最后更新时间:2021-03-15 12:54:17
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
付杰
前端工程化构建工具:Babel7+Webpack4
  • ¥ 15元
  • 市场价:15元
ThinkPHP5零基础案例实战教程
  • ¥ 598.0元
  • 市场价:2980.0元
【C语言入门到C++网络通讯架构师】系列课程
  • ¥ 1999.0元
  • 市场价:2999.0元
刷流量 刷人气 刷点击 刷收藏 刷APP关键词
  • ¥ 1.0元
  • 市场价:9.9元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: