相片按日期分类且批量删除
程序员文章站
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 -----
上一篇: Windows下VM配置虚拟机桥接模式
下一篇: mysql批量删除相同前缀表