layui表格展示多图片并点击放大

祖传代码，废了几个小时时间，因此记录下

一、js绑定数据

核心代码就 field: 'picPath', title: '举报截图', sort: false, width: 200, templet: "#picPathItem" 这一句，绑定了一个元素事件

layui.use(['form','layer','laydate','table','laytpl'],function(){
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery,
        laydate = layui.laydate,
        laytpl = layui.laytpl,
        table = layui.table;

    //非管理员登录屏蔽操作按钮
    if(localStorage.getItem("IS_ADMIN")==0){
        $(".bindingSDK_div").empty();
    }
    $("#complaint_select").val("0");
    // 举报列表
    var tableIns = table.render({

        elem: '#report_table'
        ,url:request("/console/beReport")+"&type="+Common.getValueForElement("#complaint_select")
        ,page: true
        ,curr: 0
        ,limit:Common.limit
        ,limits:Common.limits
        ,groups: 9
        ,cols: [[ //表头
            {field: 'userId', title: '举报人Id',sort: true,width:120}
            ,{field: 'userName', title: '举报人昵称',sort: true,width:150}
            ,{field: 'toUserId', title: '被举报人Id',sort: true, width:150}
            ,{field: 'toUserName', title: '被举报人昵称',sort: true, width:150}
            ,{field: 'info', title: '举报原因',sort: true, width:200}
            ,{field: 'description', title: '举报描述',sort: true, width:200}
            ,{field: 'picPath', title: '举报截图', sort: false, width: 200, templet: "#picPathItem"}
            ,{field: 'time', title: '举报时间',sort: true, width:200,templet : function (d) {
                    return UI.getLocalTime(d.time);
                }}
            ,{fixed: 'right', width: 150,title:"操作", align:'left', toolbar: '#reportUserListBar'}
        ]]
        ,done:function(res, curr, count){
            checkRequst(res);
            //获取零时保留的值
            var last_value = $("#report_limlt").val();
            //获取当前每页大小
            var recodeLimit =  tableIns.config.limit;
            //设置零时保留的值
            $("#report_limlt").val(recodeLimit);
            //判断是否改变了每页大小数
            if (last_value != recodeLimit){
                // 刷新
                table.reload("report_table",{
                    url:request("/console/beReport")+"&type="+Common.getValueForElement("#complaint_select"),
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                })
            }

            if(localStorage.getItem("role")==1){
                $(".delete").hide();
            }
        }
    });

    // 列表操作
    table.on('tool(report_table)', function(obj){
        var layEvent = obj.event,
            data = obj.data;
        console.log(data);
        if(layEvent === 'delete'){// 删除举报用户记录
            Rep.deleteReport(data.id);
        }else if(layEvent === 'lockingUser'){// 封号
            Rep.lockIngUser(data.toUserId,-1);
        }else if(layEvent === 'cancelLockingUser'){// 解封
            Rep.lockIngUser(data.toUserId,1);
        }else if(layEvent === 'lockingRoom'){// 封群
            Rep.lockIngRoom(localStorage.getItem("account"),data.roomId,-1);
        }else if(layEvent === 'cancelLockingRoom'){// 解封
            Rep.lockIngRoom(localStorage.getItem("account"),data.roomId,1);
        }else if(layEvent === 'lockingWeb'){// 禁用网页
            Rep.lockIngWeb(data.id,-1);
        }else if(layEvent === 'cancelLockingWeb'){// 解禁网页
            Rep.lockIngWeb(data.id,1);
        }
    });

    // 搜索
    $(".search_report").on("click",function(){
        table.reload("report_table",{
            url:request("/console/beReport"),
            where: {
                sender : Common.getValueForElement("#sender"), //搜索的关键字
                receiver: Common.getValueForElement("#receiver"),
                type : Common.getValueForElement("#complaint_select")
            },
            page: {
                curr: 1 //重新从第 1 页开始
            }
        })
        $("#sender").val("")
        $("#receiver").val("")

    })

    // 切换选择
    form.on('select',function (data) {
        console.log("ssssss")
        console.log(data.value)
        if(data.value==0){
            Rep.reportUser();
            $('#receiver').attr('placeholder','被举报人Id');
        }else if(data.value == 1){
            Rep.reportRoom();
            $('#receiver').attr('placeholder','被举报群组roomId');
        }else {
            Rep.reportWeb();
            $('#receiver').attr('placeholder','被举报的网页地址');
        }
    })
});

二、前端script脚本，遍历图片。祖传代码延续

这个是在html页面嵌套的，这个是核心哈

  <!--多张图片展示-->
    <script type="text/html" id="picPathItem">
        {{#  if(d.picPath == undefined || d.picPath == '' || d.picPath == null){ }}
        暂无图片
        {{#  } else { }}
            {{# for(var i=0;i < d.picPath.length;i++){ }}
                <img width='40' title="点击放大" style="cursor: pointer;" height='40' src="{{ d.picPath[i]}}" onclick="photograph(this)"/>
            {{# } }}
        {{#  } }}
    </script>

三、js实现点击放大图片

// 点击图片变大
function photograph(t) {
    if(t.src == null||t.src == ''){
        return;
    }
    layer.open({
        type: 1,
        skin: 'layui-layer-rim', //加上边框
        area: ['75%', '85%'], //宽高
        shadeClose: true, //开启遮罩关闭
        end: function (index, layero) {
            return false;
        },
        content: '<div style="text-align:center"><img src="' + t.src + '" /></div>'
    });
}

四、实现效果

 

点击小图标放大

 

 

实现方式二，在已有的HTML元素中添加

<tr>
  <td>营业执照</td>
  <td id="businessPicture_enterprise"></td>
</tr>

if(data.businessPicture != undefined && data.businessPicture != '' && data.businessPicture != null){
         for (var i = 0; i < data.businessPicture.length; i++) {
             div +="<img width='40' title=\"点击放大\" style=\"cursor: pointer;\" height='40' src=\""+data.businessPicture[i]+"\" onclick=\"photograph(this)\" /> ";
         }
     }
$("#businessPicture_enterprise").append(div);