Layui 表格中显示小的缩略图,单击弹窗查看图片

∫`不撒娇的折耳猫 2021-8-10 1229

window.showBigImage = function(e) {
            var imgHtml = "<img src='" + $(e).attr('src') + "' style='height: 450px;'/>";
            //弹出层
            layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area:['auto','auto'],  //area: [700 + 'px',500+'px'],  // area: [width + 'px',height+'px']  //原图显示
                shadeClose:true,
                scrollbar: false,
                title: "图片预览", //不显示标题
                content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
                cancel: function () {
                    //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });
                }
            });
        }
        var tableIn = table.render({
            elem: '#piclist',
            idField: 'id',
            url: '{:url("getPicList")}',
            where:{aid: {$aid}},
            toolbar: '#topBtn',
            cellMinWidth: 60,
            cols: [
                [
                    { field: 'file', title: '图片', align: 'center',  templet: function(d) {
                            //return  "<img src='"+datum.formatUrl(d.url)+"' style='height:50px;'";
                            var url ='{$Think.config.systemConfig.domain}/uploads/'+d.file;
                            if(url == null){
                                return '暂无图片';//也可设置默认图片
                            }else {
                                return '<div ><img src="'+url+'" alt="" style="height:35px;" onclick="showBigImage(this)"></a></div>';
                                // return '<img class="picture" src="' + url + '" style="height:35px;" />';
                                // return '<a href="' + url + '" target="_blank " title="点击查看">' +
                                //     '<img src="' + url + '" style="height:35px;" />' +
                                //     '</a>';
                            }
                        } },
                ]
            ],
            page: true,
            limit: 20, //每页默认显示的数量
        });


最新回复 (0)
发新帖