页面
<#-- 页头 -->
<#assign pageTitle="媒体管理">
<#assign currentNav="media">
<#include "/wxj/backendCommons/header.ftl">
<#-- 引入自定义的宏 -->
<#include "/macros/macros.ftl">
<div id="content-container" class="container">
<div class="col-md-12"><div class="panel panel-default panel-col">
<div class="panel-heading page-header clearfix">
<a href="/secure/wxj/manage/media/picture" class="btn btn-info btn-sm pull-right" > 返回</a>
<button class="btn btn-info btn-sm pull-right" id="add-picture-btn" data-toggle="modal" data-target="#modal" data-url="/secure/wxj/manage/media/${courseId}/picture/add" data-backdrop="static" style="margin-right:10px;">添加图片</button>
<a href="/secure/wxj/manage/media/${courseId}/picture/add?way=batch" class="btn btn-info btn-sm pull-right" style="margin-right:10px;" >批量添加图片</a>
图集管理 -- <span>${(course.title)!''}</span>
</div>
<#-- 图片列表 -->
<div class="panel-body content-picture">
<div>
<label class="checkbox-inline"><input id="batch-select" type="checkbox" data-role="batch-select"> 全选</label>
<button id="batch-delete" class="btn btn-default btn-sm mlm" data-role="batch-delete" data-name="图片" data-url="/secure/wxj/manage/media/picture/delete">删除</button>
</div>
<a href="/secure/wxj/manage/media/${courseId}/picture" class="btn btn-info btn-sm pull-right" > 默认排序</a>
<a href="/secure/wxj/manage/media/${courseId}/picture?sort=time" class="btn btn-info btn-sm pull-right" style="margin-right:20px;" > 时间排序</a>
<table class="table table-striped table-hover" id="picture-table">
<thead>
<tr>
<th>序号</th>
<th width="50%">图片描述</th>
<th>上传者</th>
<th>显示顺序</th>
<th>添加时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<#if uimglist?has_content>
<#list uimglist as c>
<tr>
<td>
<span> <input value="${(c.imageId)!''}" type="checkbox" data-role="batch-item"></span>
<span>${c_index+1} </span>
</td>
<td>
<a class="pull-left" href="/wxj/picture/${c.courseId}/show" target="_blank">
<img class="course-picture" src="${c.thumbnailUrl}" width="100" height="56">
</a>
<a href="#" class="mlm" target="_blank">${(c.description)!''}</a>
</td>
<td>${c.nickname!"--"}</td>
<td>
<span>${(c.ordered)!'1'}</span>
</td>
<td>
<span class="text-muted"> ${(c.dateAdded)?string('yyyy-MM-dd HH:mm:ss')}</span>
</td>
<td>
<div class="btn-group" style="margin-right:10px;">
<button class="btn btn-default btn-sm" data-url="/secure/wxj/manage/media/${(c.imageId)!''}/picture/editor" data-toggle="modal" data-target="#modal" data-backdrop="static">编辑</button>
<a href="#" type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right">
<li><a class="delete-picture" data-role="delete-picture" href="javascript:" data-url="/secure/wxj/manage/media/${(c.imageId)!''}/picture/delete"><span class="glyphicon glyphicon-trash"></span> 删除</a></li>
</ul>
</div>
<button class="btn btn-info btn-sm" data-url="/secure/wxj/manage/media/${(c.imageId)!''}/picture/replace" data-toggle="modal" data-target="#modal" data-backdrop="static">替换展示图</button>
</td>
</tr>
</#list>
</#if>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
var app = {};
app.debug = false;
app.controller = 'picture/list';
</script>
<script src="/resources/js/bootstrap-notify.js"></script>
<script>
//批量选中
$("#batch-select").click(function(){
if( $(this).is(":checked") == true){
$(".content-picture").find('[data-role=batch-select], [data-role=batch-item]').prop('checked', true);
} else {
$(".content-picture").find('[data-role=batch-select], [data-role=batch-item]').prop('checked', false);
}
});
//批量删除
$("#batch-delete").click(function(){
var $btn = $(this);
name = $btn.data('name');
var ids = [];
$(".content-picture").find('[data-role=batch-item]:checked').each(function(){
ids.push(this.value);
});
if (ids.length == 0) {
Notify.danger('未选中任何' + name);
return ;
}
if (!confirm('确定要删除选中的' + ids.length + '张' + name + '吗?')) {
return ;
}
$(".content-picture").find('.btn').addClass('disabled');
Notify.info('正在删除' + name + ',请稍等。', 60);
var values=ids.toString();
$.post($btn.data('url'), {ids:values}, function(){
window.location.reload();
});
});
</script>
<#-- 页脚开始 -->
<#include "/wxj/backendCommons/footer.ftl">
控制层:
/**
* 批量删除图片。
*/
@RequestMapping(value = "/picture/delete", method = { RequestMethod.GET, RequestMethod.POST })
public ResponseEntity<AjaxPostResponse> deletePictureList(HttpServletRequest request) {
// 待删除的图片ID列表
String imageIds = ServletRequestUtils.getStringParameter(request, "ids", "");
String[] imageList = imageIds.toString().split(",");
List<String> imageIdList = Arrays.asList(imageList);// 数组转换成list
try {
boolean opStatus = uploadedImageManager.delete(imageIdList);
logger.info("批量删除图片:opStatus={}", opStatus);
return this.okResponse(opStatus);
} catch (Exception e) {
logger.error("批量删除图片时发生异常, Cause: ", e);
return this.errorResponse(e.getMessage());
}
serveis:
@Override
public boolean delete(List<String> imageIds) {
// 删除通知
UploadedImageExample example = new UploadedImageExample();
example.createCriteria().andImageIdIn(imageIds);
int rows = uploadedImageMapper.deleteByExample(example);
return (rows > 0);
}