下载viewer.js到本地,并在页面中引入
页面引入js和css
<link rel="stylesheet" href="/plugins/viewer/viewer.min.css" th:href="@{/plugins/viewer/viewer.min.css}">
<script src="/plugins/viewer/viewer.js" th:src="@{/plugins/viewer/viewer.js}" type="text/javascript"></script>
创建imgView.js
async function imgview(api,limit,where,count) {
$("#UploaderHiddenImg").remove();
$.ajax({
type:"get",
async:true,
url: api,
dataType:"json",
data:{
...where,
page: 1,
limit: count
},
success:function(result){
var imgList = result.data
if (imgList.length > 0) {
$("body").append('<div id="UploaderHiddenImg" style="display:none;"></div>');
for (let index = 0; index < imgList.length; index++) {
var url = "展示图片地址的接口路径";
var imgs = JSON.parse(imgList[index].fileList);
let name = 'xxxx';
$("#UploaderHiddenImg").append('<img alt="'+name +'" src="' + url + '" style="width: 100% !important;height: 100%;!important;"/>');
}
var viewer = new Viewer(document.getElementById('UploaderHiddenImg'), {
zIndex: 999,
hidden: function () {
viewer.destroy();
$("#UploaderHiddenImg").remove();
},
});
viewer.show()
var titleButton = viewer.viewer.querySelector('.viewer-footer .viewer-title');
titleButton.style.cursor = 'pointer'
titleButton.addEventListener('click', function(e) {
var elem = viewer.viewer.querySelector('.viewer-navbar .viewer-list .viewer-active')
var index = elem.dataset.index;
viewer.hidden()
positioning(index)
});
viewer.view(limit-1);
}
else{
layer.msg(result.msg);
}
},
error:function(){
layer.msg("错误");
},
});
}
}
function positioning(index) {
var currentPageNo = 0;
var pageLimit = 0;
currentPageNo = abnormalTable.config.page.curr;
pageLimit = abnormalTable.config.limit;
abnormalTablePageInfo = getPageAndIndex(currentPageNo,pageLimit,index)
if(currentPageNo != abnormalTablePageInfo.currentPage) {
searchAbnormalTable(taskRunCodes)
} else {
dwTableRow('abnormalTableDiv')
}
}
function clearRowBg(arr) {
arr.each(function (index,elemnt) {
if(index % 2) {
arr[index].style.backgroundColor = 'rgba(13,51,114,0.5)'
} else {
arr[index].style.backgroundColor = 'transparent'
}
})
}
function dwTableRow(id) {
var indexToStyle = abnormalTablePageInfo.currentIndex - 1
var view = $('#'+id+' .layui-table-body .layui-table');
var viewTable = $('#'+id+' .layui-table-body');
var trs = view.find('tr');
if(trs.length > 0) {
clearRowBg(trs)
if(trs[indexToStyle]){
trs[indexToStyle].style.backgroundColor = '#0576d1';
viewTable[0].scrollTop = trs[indexToStyle].offsetTop - viewTable[0].offsetTop;
}
} else {
setTimeout(() => {
dwTableRow(id)
}, 1000)
}
}
function getPageAndIndex(dataLength, pageSize, clickIndex) {
const totalPages = Math.ceil(dataLength / pageSize);
const currentPage = Math.floor(clickIndex / pageSize) + 1;
const currentIndex = clickIndex % pageSize + 1;
return { totalPages, currentPage, currentIndex };
}
function myFunction(e) {
layui.use('table', function() {
var table = layui.table;
var api = '';
var tabelId = ''
var imgList = []
var count = 0
tabelId = 'abnormalTable'
imgList = imgList1
count = imgList1Count
api = 'xxxxxx'
imgview(api,Number(e.dataset.index),{},count)
})
}
表格数据获取
function searchAbnormalTable(){
layui.use('table',function(){
var table =layui.table;
abnormalTable = table.render({
elem:'#abnormalTable',
url: url,
where:{},
cols: [[
{type:'numbers', title:'序号',align:'center',width:50},
{
field: 'fileList', title: '巡视图像', align: 'center', width: 250,
templet: function (d) {
var barDiv = '<div>';
barDiv += '<a data-index="'+d.LAY_INDEX+'" href="javascript:void(0);" οnclick="myFunction(this)" style="width:100%;height:20px;word-break:break-word">预览图片</a>'
return barDiv + '</div>';
}
}
]],
height:'500px',
page:true,
limit:10,
limits:[10,15,20],
done: function(res, curr, count){
},
});
dwTableRow('abnormalTableDiv')
if(abnormalTablePageInfo.currentPage) {
var view = $('#abnormalTableDiv .layui-table-body .layui-table');
var trs = view.find('tr');
clearRowBg(trs)
table.reload('abnormalTable', {
page: {
curr: abnormalTablePageInfo.currentPage
},
});
}
});
}