fastadmin后台列表页，图片可以放大显示
define(['jquery','bootstrap','backend','table','form'],function($,undefined,Backend,Table,Form){varController={
admin
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init({
extend: {
index_url: 'inspection/projectsite/index?project_id=' + $("#table").attr("data-id"),
dragsort_url:'',
table: 'inspection_project',
}
});
var table = $("#table");
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
pk: 'id',
sortName: '',
pageSize:10,
search:false,
commonSearch:false,
columns: [
[
{field: 'id', title: __('Id'),operate: false},
{field: 'staff_name', title: __('巡检人'),operate: false},
{field: 'area_name', title: __('巡检区域'),operate: false},
{field: 'site_name', title: __('巡检点名称'),operate: false},
{field: 'content', title: __('备注'),operate: false},
//{field: 'images', title: __('照片'),formatter: Table.api.formatter.images},
{
field: 'images',
title: __('照片'),
operate: false,
formatter: function(value, row, index) {
if (!value || value.trim() === '') {
return '<span class="text-muted">-</span>';
}
// 直接按逗号分割字符串
var imageUrls = value.split(',');
// 过滤空值
imageUrls = imageUrls.filter(function(url) {
return url && url.trim() !== '';
});
if (imageUrls.length === 0) {
return '<span class="text-muted">-</span>';
}
var html = '<div style="white-space: nowrap;">';
imageUrls.forEach(function(url, i) {
var cleanUrl = url.trim();
// 缩略图URL
var thumbUrl = cleanUrl + (cleanUrl.indexOf('?') === -1 ? '?' : '&') + 'imageView2/1/w/60/h/60';
//html += '<a href="javascript:;" onclick="previewImages(' + i + ', \'' + value.replace(/'/g, "\\'") + '\')" style="display: inline-block; margin: 2px;">';
// 使用 Controller.api.previewImages
html += '<a href="javascript:;" onclick="Controller.api.previewImages(' + i + ', \'' + value.replace(/'/g, "\\'") + '\')" style="display: inline-block; margin: 2px;">';
html += '<img src="' + thumbUrl + '" style="width: 50px; height: 50px; object-fit: cover; border: 1px solid #ddd; border-radius: 3px;" alt="照片' + (i+1) + '">';
html += '</a>';
});
html += '</div>';
return html;
}
},
{field: 'result', title: __('巡检结果'),searchList: {"0": __('未检'), "1": __('异常'), "2": __('正常')}, operate: '=',formatter: Controller.api.formatter.result},
{field: 'checktime', title: __('巡检时间'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
{field: 'status', title: __('状态'),searchList: {"-1": __('漏检'), "0": __('未巡检'), "1": __('已巡检')},formatter: Controller.api.formatter.status},
{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate,align:'left',
buttons: [
{
visible: function (row) {
//返回true时按钮显示,返回false隐藏
if(row.status == 1){
return true;
}
return false;
},
name: 'item',
text: __('检查项记录'),
title: __('检查项记录'),
classname: 'btn btn-xs btn-warning btn-dialog',
url: 'inspection/projectitem/index'
},
],
formatter: Table.api.formatter.operate}
]
],
});
// 为表格绑定事件
Table.api.bindevent(table);
},
add: function () {
Controller.api.bindevent();
},
edit: function () {
Controller.api.bindevent();
},
api: {
// 图片预览函数
previewImages: function(index, imagesString) {
try {
if (!imagesString || imagesString.trim() === '') {
layer.msg('没有可预览的图片');
return;
}
var imageUrls = imagesString.split(',');
imageUrls = imageUrls.filter(function(url) {
return url && url.trim() !== '';
});
if (imageUrls.length === 0) {
layer.msg('没有可预览的图片');
return;
}
var currentIndex = parseInt(index) || 0;
if (currentIndex < 0) currentIndex = 0;
if (currentIndex >= imageUrls.length) currentIndex = imageUrls.length - 1;
var photoData = imageUrls.map(function(url, i) {
return {
alt: "照片 " + (i + 1),
pid: i,
src: url.trim(),
thumb: url.trim()
};
});
layer.photos({
photos: {
"title": "巡检照片 (" + (currentIndex + 1) + "/" + imageUrls.length + ")",
"start": currentIndex,
"data": photoData
},
anim: 5,
shadeClose: true,
closeBtn: 1
});
} catch (e) {
console.error('图片预览错误:', e);
layer.msg('图片预览失败');
}
},
formatter:{
result: function (value, row, index) {
switch (value) {
case 0:
return "未巡检";
case -1:
return "<span style='color: #ff3300'>异常</span>";
case 1:
return "<span style='color: #008800'>正常</span>";
}
},
status: function (value, row, index) {
switch (value) {
case -1:
return "<span style='color: #ff3300'>漏检</span>";
case 0:
return "进行中";
case 1:
return "<span style='color: #008800'>已检</span>";
}
},
value: function (value, row, index) {
switch (row.type) {
case 1:
return value==1?'正常':'异常';
case 2:
return value;
}
},
},
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
}
}
};
// 将Controller挂载到全局，以便onclick调用
window.Controller = Controller;
return Controller;
});代码里面有三处代码：1、添加 field: 'images'，2、previewImages: function(index, imagesString) 添加这个函数，3、添加 window.Controller = Controller;
需要注意的是：images字段的数据类型是图片完整路径的字符串，多张图片使用英文逗号隔开
