viewer.js 在layui中使用，并且实现表格中点击预览，点击图片名称定位到表格中某一条数据并高亮显示

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

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

页面引入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页
				},
			});
		}
	});

}