最近有个需求,要在layui数据表格内放入图片,于是我放入了一个按钮,并添加了点击显示大图的功能。

敲代码

首先写一个table

<table class="layui-hide" id="tasklist" lay-filter="tasklist"></table>

然后装载数据

// 初始化表格
        let taskTable = table.render({
            elem: '#tasklist'
            , url: '/task/list/page'
            , toolbar: '#toolbartaskList'
            , cols: [[
                 { field: 'id', title: '报修单ID', sort: true, width: 100 }
                , { field: 'description', title: '报修内容描述' }
                , { field: 'imgsrc', title: '图片'}
                , { field: 'buildingid', title: '楼栋ID' }
                , { field: 'issolved', title: '是否解决' }
                , { field: 'tasksolver', title: '维修人' }
                , { field: 'isverify', title: '审核状态' }
                , { field: 'taskadder', title: '创建人' }
                , { field: 'taskverifyuser', title: '审核人' }
                , { fixed: 'right', title: '操作', toolbar: '#bartask', width: 150 }
            ]]
            , page: true
        });

其中,需要对图片字段的内容进行定制化修改,因为图片字段返回的是一张图片的链接,所以我计划在这里放一个按钮,实现点击查看图片。
幸运的是,layui自带laytpl模板语言我们可以为field添加一个templet,我们一个函数获取当前行的值,然后取出当前行图片字段的内容,如果为空就返回无图片,不为空则返回一个按钮,为了防止dom冲突,我将数据的id拼接到img的id中,这样id就不会重复:

, { field: 'imgsrc', title: '图片' ,templet:function(row) {
​
                        let thisid = row.id;
                        let thisimgsrc = row.imgsrc;
​
                        if (thisimgsrc !== null){
                            return "<button type='button' class=\"layui-btn layui-btn-xs\" id='clickimg"+ thisid +"' >点击查看大图</button>"
                        }else {
                            return "无图片";
                        }
                        }
  }

然后在此基础上,我们为这个按钮添加一个点击事件,实现点击事件,并且弹出layer显示当前的图片:

, { field: 'imgsrc', title: '图片' ,templet:function(row) {
​
                        let thisid = row.id;
                        let thisimgsrc = row.imgsrc;
​
                        $(document).on('click',"#clickimg" + thisid,function(){
                            // layer.msg("按钮点击");
                            layer.open({
                                type: 1,
                                title: false,
                                closeBtn: 0,
                                area: ['80%','80%'],
                                skin: 'layui-layer-nobg', //没有背景色
                                shadeClose: true,
                                content: "<img style='width: 100%;' src =\'" + row.imgsrc + "\'>"
                            });
                        });
                        if (thisimgsrc !== null){
                            return "<button type='button' class=\"layui-btn layui-btn-xs\" id='clickimg"+ thisid +"' >点击查看大图</button>"
                        }else {
                            return "无图片";
                        }
                        }
  }

效果

image.png

image.png

完整代码

layui.use(function () {
    let layer = layui.layer
            , form = layui.form
            , $ = layui.$;
    
    let taskTable = table.render({
            elem: '#tasklist'
            , url: '/task/list/page'
            , toolbar: '#toolbartaskList'
            , cols: [[
                 { field: 'id', title: '报修单ID', sort: true, width: 100 }
                , { field: 'description', title: '报修内容描述' }
                , { field: 'imgsrc', title: '图片' ,templet:function(row) {
​
                        let thisid = row.id;
                        let thisimgsrc = row.imgsrc;
​
                        $(document).on('click',"#clickimg" + thisid,function(){
                            // layer.msg("按钮点击");
                            layer.open({
                                type: 1,
                                title: false,
                                closeBtn: 0,
                                area: ['80%','80%'],
                                skin: 'layui-layer-nobg', //没有背景色
                                shadeClose: true,
                                content: "<img style='width: 100%;' src =\'" + row.imgsrc + "\'>"
                            });
                        });
                        if (thisimgsrc !== null){
                            return "<button type='button' class=\"layui-btn layui-btn-xs\" id='clickimg"+ thisid +"' >点击查看大图</button>"
                        }else {
                            return "无图片";
                        }
​
​
​
                        }}
                , { field: 'buildingid', title: '楼栋ID' }
                , { field: 'issolved', title: '是否解决' }
                , { field: 'tasksolver', title: '维修人' }
                , { field: 'isverify', title: '审核状态' }
                , { field: 'taskadder', title: '创建人' }
                , { field: 'taskverifyuser', title: '审核人' }
                , { fixed: 'right', title: '操作', toolbar: '#bartask', width: 150 }
            ]]
            , page: true
        });
}
微信公众号
最后修改:2021 年 06 月 10 日 11 : 43 AM
如果您觉得我的文章有帮助,请随意赞赏!