layui 表格实现轮播图总结

最新推荐文章于 2023-08-16 17:30:14 发布

alsdiuhfeircn

最新推荐文章于 2023-08-16 17:30:14 发布

阅读量2.2k

点赞数

分类专栏： layui 文章标签：轮播图

本文链接：https://blog.youkuaiyun.com/alsdiuhfeircn/article/details/97107455

版权

layui 专栏收录该内容

7 篇文章

订阅专栏

一、数据库表中

字段pictures 有属性值如下：

upload/39419A55E549452C8BA24D9201BCF758.jpg,upload/1C03868CC8174B20892C1331BBC00462.jpeg

二、在实体文件夹model下除了pictures还有displayImgs。

三、对象映射发生在查询后台数据库时。

@RequestMapping("selAdminPage")
	@ResponseBody
	public DataGridView selAdminPage(Admin admin,PageVO pageVO){//,Model model
		pageVO.setPage((pageVO.getPage()-1)*pageVO.getLimit());
		Map<String,Object> map=new HashMap<>();
		map.put("admin",admin);
		map.put("page",pageVO);
		List<Object> list=adminService.selAdminPage(map);
		//实现对多图片的表格显示 
		for (Object list1 : list) {
			String html="";
			Admin admin2=(Admin)list1;
			if(admin2.getPictures()!=null&&admin2.getPictures()!=""){
				String[] split = admin2.getPictures().split(",");
				for (String string : split) {
					if(!string.equals("")){
						html+="<img src=/MavenProject/";  //MavenProject是项目名称。                                                                                                                                                                                                 
						html+=string;
						html+=" height=40px ></img>";
						html+="&nbsp;&nbsp;&nbsp;";
					}
				}
				admin2.setDisplayImgs(html);//为实体中displayImgs参数赋值
			}
		}
		
		DataGridView dataGridView=new DataGridView();
		dataGridView.setCode(0);
		dataGridView.setData(list);
		dataGridView.setCount(adminService.count(admin));
		return dataGridView;
	}

四、在表格渲染的时候直接用

,{field: 'displayImgs', title: '商品轮播图',align:'center', width:150}就完事了。

补：对比单张图片的显示

,{field: 'headImg', title: '头像', templet:function(data){
return '<img src="${pageContext.request.contextPath}'+ data.headImg+'" class="layui-upload-img" id="img" width="50" height="50">'
} } 显然在img标签下的src的路径还是有所不同的。