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

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 -----