1.导入Css
<th:block th:include="include :: viewer-css"/>
2. 添加div
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table"></table>
</div>
3.导入js
<th:block th:include="include :: viewer-js"/>
4.字段中添加formatter 函数
formatter: function (value, row, index) {
let urls = (value?value:"").split("|");
if (urls.length>0) {
let content = "";
for (let i = 0; i < urls.length; i++) {
content += '<i class="fa fa-picture-o"></i> ';
}
return '<a class="btn btn-icon" href="javascript:void(0);" onclick="view(\'' + value + '\')">' + content + '</a>';
}
return "无"
}
5.添加view函数点击查看图片
// 查看图片
let viewer = null;
function view(urls) {
let container = $("#viewer").empty();
let ps = urls.split("|");
for (let i = 0; i < ps.length; i++) {
container.append('<li><img src="' + ctx + ps[i] + '" alt="图片1"></li>');
}
viewer = new Viewer(container[0], {
fullscreen: true,
hidden: function () {
viewer.destroy();
viewer = null;
}
});
container.find("img").click();
}