下载viewer.js到本地，并在页面中引入
页面引入js和css
javascript
复制代码
<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
javascript
复制代码
// 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.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); // 图片list
let 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("错误");
},
});
}
}
javascript
复制代码
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 - 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 {
// 因为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 = 0
tabelId = 'abnormalTable'
imgList = imgList1
count = imgList1Count
api = 'xxxxxx'
imgview(api,Number(e.dataset.index),{},count)
})
}
表格数据获取
javascript
复制代码
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页
},
});
}
});
}