参考文章:https://blog.csdn.net/MPFLY/article/details/99682770#commentBox
公司需求,需要预览表格内的图片。学艺不精,遍寻网络,找到了一个galpop插件,符合需求,功能强大。官网介绍
由于表格是在js里面写的,使用时我遇到了一个问题,图片预览每次都是打开了一个新的iframe层,展示效果不好,不断的测试排除原因,发现是因为打开图片时没有执行插件方法,所以就直接打开了a标签的href,也就是图片链接,所以就变成了在新窗口打开图片。修改后的代码如下:
$.ajax({
url: path + '/userActivityApply/getUserActivityApplyList.do',
type:'get',
data:search,
beforeSend: function(){
$('.articleBox .noHtml').hide();
$('.articleBox .allContentList').empty();
$('.articleBox .loadingListBox').show();
},
success: function(data){
$('.articleBox .loadingListBox').hide();
$('.articleBox .noHtml').hide();
if(data.status != 0){
return layer.msg(data.msg);
}
var data = data.data;
var search = data.userActivityApply;
var list = data.userActivityApplies;
var currentPage = data.currentPage;
var num = data.num;
var pageSize = data.pageSize;
var totalPage = data.totalNum;
$('#pageNum').html(currentPage);
$('#jumpPage').val(currentPage);
$('#totalPage').html(totalPage);
$('#pageSize').val(pageSize);
$('#num').html(num);
if(list.length > 0){
var html = '';
for(var i in list){
html += '<tr>'+
'<td class="img"><a href="http://myclub-new.oss-cn-beijing.aliyuncs.com/runOnline/f1783a82c811ed498f0b5fc1905803c2.png" class="galpop-single">' +
'<img src="'+list[i].image+'">' +
'</a></td>'+
'<td>'+list[i].userName+'</td>'+
'<td>'+list[i].name+'</td>';
if (list[i].userSex !== "") {
if (list[i].userSex == 0){
html += '<td>男</td>'
}
if (list[i].userSex == 1){
html += '<td>女</td>'
}
}else {
html += '<td>-</td>'
}
html += '<td>'+list[i].userAge+'</td>'+
'<td>'+list[i].userNumber+'</td>'+
'<td>'+list[i].time+'</td>'+
'<td>'+list[i].money+'</td>'+
'<td>'+(list[i].payment == 1 ? "微信支付" : "-")+'</td>';
if (list[i].type != ""&& list[i].type != null) {
if (list[i].type == 0){
html += '<td class="option">活动未开始</td>'
}if (list[i].type == 1){
html += '<td class="option">活动进行中</td>'
}if (list[i].type == 2){
html += '<td class="option">活动已结束</td>'
}if (list[i].type == 3){
html += '<td class="option">活动已下架</td>'
}
}else{
html += '<td class="option">-</td>';
}
if(delBtn){
html +='<td><i class="operaIcon layui-icon"></i><div class="operaBox">';
html += '<div class="deleteButton">'+
'<i class="layui-icon"></i>'+
'<span>删除</span>'+
'<input type="hidden" value="'+list[i].id+'">'+
'</div>'
}
html += "</td></tr>";
}
html = html.replace(/null/g, '-')
$('.articleList .allContentList').html(html);
$('.pageListBox').show();
}else{
$('.articleBox .noHtml').show();
$('.pageListBox').hide();
}
form.render();
//点击查看大图
$('.galpop-single').galpop({
maxScreen: 50
});
},
error: function(data){
layer.msg('网络连接异常');
}
})
效果图: