先展示效果图:
图片这一栏的数据是从关联表查询出来的,先在实体类中添加img属性及get、set方法,然后在***Controller的listData方法中添加如下代码:
private static final String prefixPath = "https://***/patrolimg/userfiles/fileupload";
List<Tpatrol> tpatrols = page.getList();
if (tpatrols != null && tpatrols.size() >0) {
for (Tpatrol tp : tpatrols) {
String uid = tp.getUid();
Tuser tuser = tuserService.get(uid);
tp.setUid(tuser.getNickname());
// 将图片url放入img字段中
String patrolId = tp.getId();
List<TpatrolImg> imgs = tpatrolImgService.getListByPatrolId(patrolId);
String img = "";
if (imgs != null && imgs.size() > 0) {
for (TpatrolImg tpatrolImg : imgs) {
img += prefixPath+tpatrolImg.getImg()+",";
}
}
tp.setImg(img);
}
}
然后在列表页面添加如下代码:
{header:'${text("图片")}', name:'img', index:'a.img', width:300, align:"left", formatter: function(val, obj, row, act){
var arr = row.img.split(",");
var str="";
for(var i=0; i<arr.length; i++){
var str= str+'<img src="'+arr[i]+'"style="height:80px;">';
}
return str;
}},