下载viewer.js到本地，并在页面中引入

下载地址: https://www.dowebok.com/demo/192/

页面引入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

// api（表格列表接口地址）
// limit（点击表格时的下标，用来默认显示当前点击的是第几张图片）
// where（接口入参条件）
// count（总条数）
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.dataif (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); // 图片listlet name = 'xxxx'; // 图片名称$("#UploaderHiddenImg").append('<img alt="'+name +'" src="' + url + '" style="width: 100% !important;height: 100%;!important;"/>');}var viewer = new Viewer(document.getElementById('UploaderHiddenImg'), {// initialViewIndex: currentIndex,zIndex: 999, // 预览层级// title: false, // 是否展示图片名字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'}})
}
// 定位表格行
// id（表格父级元素的id）
function dwTableRow(id) {var indexToStyle = abnormalTablePageInfo.currentIndex - 1var 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 {// 因为layui表格在渲染时是异步的，但是在setTimeout(() => {dwTableRow(id)}, 1000)}
}
// dataLength（表格每页展示的条数），pageSize（你想每页展示的条数），clickIndex（点击行的下标）
// 根据已知分页数，从新获取当前点击下标是在第几页第几条
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 = 0tabelId = 'abnormalTable'imgList = imgList1count = imgList1Countapi = '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 // 假设你想要跳转到第2页},});}});}