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);