jquery+java选中批量删除

页面

<#-- 页头 -->
<#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);
    }


你可能感兴趣的:(jquery+java选中批量删除)