关于javascript:springBoot批量删除数据

40次阅读

共计 4346 个字符,预计需要花费 11 分钟才能阅读完成。

基于 springBoot 批量删除数据
1. 定义数据层接口

package com.cy.pj.sys.dao;

import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import com.cy.pj.sys.pojo.SysLog;
@Mapper
public interface SysLogDao {
/**
     * 增加基于 id 执行日志删除的办法
     */
    int deleteObjects(@Param("ids")Integer...ids);
    
}

2. 编写 mapper 映射文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.cy.pj.sys.dao.SysLogDao">
<delete id="deleteObjects">
        delete from sys_Logs
        <choose>
        <when test="ids!=null and ids.length>0">
        <where>
        <foreach collection="ids" item="id" separator="or">    
            id=#{id}
        </foreach>
        </where>
        </when>
        <otherwise>
        where 1=2
        </otherwise>
        </choose>
    </delete>
</mapper>

3. 写 service 接口层

package com.cy.pj.sys.service;

import com.cy.pj.sys.pojo.PageObject;
import com.cy.pj.sys.pojo.SysLog;

public interface SysLogService {int deleteObjects(Integer...ids);
}

4. 写 service 接口实现类

package com.cy.pj.sys.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.cy.pj.sys.dao.SysLogDao;
import com.cy.pj.sys.pojo.PageObject;
import com.cy.pj.sys.pojo.SysLog;
import com.cy.pj.sys.service.SysLogService;

@Service
public class SysLogServiceImpl implements SysLogService {
    @Autowired
    private SysLogDao sysLogDao;
    @Override
    public int deleteObjects(Integer... ids) {
        // 断定参数的合法性
        if (ids==null || ids.length==0)
            throw new IllegalArgumentException("请抉择一个");
        
        // 执行删除操作
        int rows;
        try {rows = sysLogDao.deleteObjects(ids);
        }catch(Throwable e) {e.printStackTrace();
            // 发出报警信息 (例如给运维人员发短信)

            throw new ServiceException("系统故障,正在复原");
        }
        // 对后果进行验证
        if (rows==0)
            throw new ServiceException("记录可能曾经不存在");
        return rows;
    }

}

5. 写 concoller 层

package com.cy.pj.sys.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.cy.pj.sys.pojo.JsonResult;
import com.cy.pj.sys.service.SysLogService;

@Controller
public class SysLogController {
    @Autowired
    SysLogService sysLogService;
@RequestMapping("doDeleteObjects")
@ResponseBody
public JsonResult doDeleteObjects(Integer...ids) {sysLogService.deleteObjects(ids);
    return new JsonResult("删除  OK");    
}
}

6. 当初开始前端的代码和 js 代码 其性能有通过 input 选中全副或勾销全副

<!-- 删除按钮 -->
<div class="input-group-btn">
<button type="button" class="btn btn-default btn-delete"> 删除 </button>
</div>
<!-- 要显示数据的表单 -->
<div class="box-body table-responsive no-padding">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="checkAll"> 全选 </th>
                            <th> 用户名 </th>
                            <th> 操作 </th>
                            <th> 申请办法 </th>
                            <th> 申请参数 </th>
                            <th>IP</th>
                            <th> 执行时长 </th>
                        </tr>
                    </thead>
                    <tbody id="tbodyId">
                        <tr>
                            <td colspan="7"> 数据正在加载中...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
<script type="text/javascript">
$(function(){
            /* 获取删除按扭事件 */
$(".input-group-btn").on("click",".btn-delete",doDeleteObjects);
  /* 点击表头的 input 选中,而后表 body 局部也全副选中 input */        $("#checkAll").click(doChangeTBodyCheckBoxState);
  /* 当呈现 body 中有 input 没有被选中 咋勾销表头 input 的选项,当 body 局部的 input 全副被选中这是也主动选中表头的 input 选项 */
$("#tbodyId").on("click",".cBox",doChangeTHeadCheckBoxState);
});
/* 点击删除按钮进行对数据删除 */
function doDeleteObjects(){
    // 获取选中的 id 值
    var ids=doGetCheckedIds();
    if(ids.length==0){alert("至多抉择一个");
        return;
    }
    //2. 发异步申请执行删除操作
    var url ="doDeleteObjects";
    var params={"ids":ids.toString()};
    $.post(url,params,function(result){if(result.state==1){alert(result.message);
            doGetObjects();}else{alert(result.message);
        }
    });
    $("#checkAll").prop("checked",false);
}

/* 获取要删除数据的 id*/
/* 定义获取用户选中的记录 id 的函数。*/
function doGetCheckedIds(){

     // 定义一个数组, 用于存储选中的 checkbox 的 id 值
    var array=[];//new Array();
     // 获取 tbody 中所有类型为 checkbox 的 input 元素
     $("#tbodyId input[type=checkbox]").
     // 迭代这些元素,每发现一个元素都会执行如下回调函数
     each(function(){
         // 如果次元素的 checked 属性的值为 true
         if($(this).prop("checked")){
             // 调用数组对象的 push 办法将选中对象的值存储到数组
             array.push($(this).val());
         }
     });
     console.log("array",array)
     return array;
}

/* Thead 中全选元素的状态影响 tbody 中 checkbox 对象状态 */
 function doChangeTBodyCheckBoxState(){
    //1. 获取以后点击对象的 checked 属性的值             
    var flag=$(this).prop("checked");//true  or false
    //2. 将 tbody 中所有 checkbox 元素的值都批改为 flag 对应的值
    // 第一种计划
    $("#tbodyId input:checkbox").prop("checked",flag);
              
    // 第二种计划
    /* 
    $("#tbodyId input[type='checkbox']")
       .prop("checked",flag);
    */
}
/* Tbody 中 checkbox 的状态影响 thead 中全选元素的状态 */
function doChangeTHeadCheckBoxState(){
    //1. 设定默认状态值
    var flag = true;
    //2. 迭代所有 tbody 中的 checkbox 值并进行与操作
    $("#tbodyId .cBox")
    .each(function(){flag=flag&&$(this).prop("checked");
    });
    //3. 批改全选元素 checkbox 的值为 flag
    $("#checkAll").prop("checked",flag);
}

            </script>

正文完
 0