欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

相片按日期分类且批量删除

程序员文章站 2024-03-21 18:15:52
...

1、在后台将照片按日期分类。

// 相册详细列表【相册照片--按时间顺序排列】
	@RequestMapping(value="/toDetailsAlbum")
	public ModelAndView detailsAlbum(@RequestParam(value="zoneId") String zoneId,
			@RequestParam(value="albumsId") String albumsId,HttpServletRequest request){
		ModelAndView model = new ModelAndView("/classedit/albums/detailsAlbum");
		List<GzonePhoto> listGzonePhoto = gzonePhotoService.selectPhotoByAlbumId(albumsId);
		GzoneAlbums gzoneAlbums = gzoneAlbumsService.selectGzoneAlbumsByAlbumId(albumsId);
		Set<String> setDate = new HashSet<String>();
		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
		for (GzonePhoto gzonePhoto : listGzonePhoto)
			setDate.add(sdf.format(gzonePhoto.getUploadTime()));
		Map<String,List<GzonePhoto>> mapListGP = new HashMap<String,List<GzonePhoto>>();
		List<GzonePhoto> list = null;
		for(String str:setDate){
			list = new ArrayList<GzonePhoto>();
			for(GzonePhoto gzonePhoto:listGzonePhoto)
				if(sdf.format(gzonePhoto.getUploadTime()).equals(str))
					list.add(gzonePhoto);
			mapListGP.put(str, list);
		}
		model.addObject("listGzonePhoto", listGzonePhoto);
		model.addObject("gzoneAlbums", gzoneAlbums);
		model.addObject("zoneId", zoneId);
		model.addObject("albumsId", albumsId);
		model.addObject("setDate", setDate);
		model.addObject("mapListGP", mapListGP);
		return model;
	}


2、在前端用freemarker显示出来【freemarker是后台框架,即先取出来再把值放到前端页面上】。

<#if setDate??>
		    <#list setDate as sd>
		    	<#list mapListGP?keys as key>
		    		<#if sd==key>
					    <div class="title feedback_title" name="${sd}">
							<span class="f_left">${sd?substring(0,4)}年${sd?substring(4,6)}月${sd?substring(6)}日</span> 
								<label class="mui-btn mui-btn-success f_right">选择</label>
								<input class="checkall" type="checkbox" style="display:none" name="${sd}">
						</div>
						<ul class="mui-table-view mui-grid-view" name="${sd}">
							<#list mapListGP[key] as value>
							<li class="mui-table-view-cell mui-media mui-col-xs-4" name="${sd}">
								<a id="${value.photoId}">
									<!-- <img class="mui-media-object" src="/images${value.path}"> -->
									<img class="mui-media-object" src="/classSpaceAlbum${value.path}">
								</a>
								<form class="mui-input-group choice">
									<div class="mui-input-row mui-checkbox choice-checkbox mui-left" time="${value.photoId}">
										<input jtype="checkbox" type="checkbox">
									</div>
								</form>
							</li>
							</#list>
						</ul>
					</#if>
		    	</#list>
		    </#list>
		</#if>

3、按日期批量选择:

$(function() {
	    	$(".checkall").click(function() {
				if ($(this).is(':checked')) {
					if($(this).attr("name")==$(this).parent().next().attr("name"))
						$(this).parent().next().children().find("input[jtype='checkbox']").prop('checked', true);
				} else {
					$("input[jtype='checkbox']").prop('checked', false);
				}
			})
	    });


4、将选择的照片批量删除:

function deletePhotos(){
			$.ajax({
				url:"${base}/classedit/albums/toDeletePhoto?albumsId=${albumsId}"+selectPhotos(),
				type:"post",
				success:function(result){
					if(result.status==true){
						alert(result.msg);
						window.location.reload();
					}
				}
			});
		}
		
		function selectPhotos(){
			var arrBox = new Array();
			var params = "";
			$("#muiDivId").find("div").each(function(){
				var objForm = new Object();
				if($(this).hasClass("mui-input-row mui-checkbox choice-checkbox mui-left")){
					objForm.photoId = $(this).attr("time");
					if($(this).find("input").is(':checked')){
						arrBox.push(objForm);
						params += "&photoId="+objForm.photoId;
					}
				}
			});
			return params;
		}

5、返回到相册详情页。

<a onclick="window.location.href='toDetailsAlbum?zoneId=${zoneId }&albumsId=${albumsId }'"></a>

6、删除相片评论。

① HTML:

<span class="mui-h5 f_right">
	<a onclick="return delComment(this,'${cmsList.commentId}')" class="fong_gray f12">删除</a>
</span>

② JS:

function delComment(obj,commentId){
			if(confirm('您确定要删除选中的记录吗?')==true){
				$.ajax({
					url:"${base}/classedit/albums/toPhotoByDelete",
					type:"post",
					data:{
						zoneId:"${zoneId}",
						albumsId:"${gzonePhoto.albumsId}",
						photoId:"${gzonePhoto.photoId}",
						commentId:commentId
					},
					success:function(result){
						if(result.status==true){
							alert(result.msg);
						}else
							alert(result.msg);
						window.location.reload();
					}
				});
				return true;
			}else
				return false;
		}

7、页面显示。

    在Nginx中配置tomcat的context映射,详见http://blog.csdn.net/a515557595_xzb/article/details/79259771。

相片按日期分类且批量删除


----- END -----