deletefromtest_detailwhereidin

ssm批量删除

ssm批量删除最近要实现一个功能,效果图如下,当点击最上方复选框可以实现总控制全选和取消操作,然后点击批量删除按钮可以实现删除所选中的数据行环境说明采用ssm集合框架,配置部分不罗列Dao层question.xmldeletefromtest_detailwhereidin

最近要实现一个功能,效果图如下,当点击最上方复选框可以实现总控制全选和取消操作,然后点击批量删除按钮可以实现删除所选中的数据行
这里写图片描述

环境说明

采用ssm集合框架,配置部分不罗列
只听到从架构师办公室传来架构君的声音:
独敲初夜磬,闲倚一枝藤。有谁来对上联或下联?

Dao层

question.xml

此代码由Java架构师必看网-架构君整理
<delete id="deleteMany" parameterType="int"> delete from test_detail where id in <foreach item="qid" collection="array" open="(" separator="," close=")"> #{qid} </foreach> </delete>

注解说明:
deleteMany:是对应mapper里面的方法
int:因为传入的参数是int[]
id:是我数据表里面的字段名,我是根据id删除的
qid:这是我设置的参数名,要注意item=”qid”和#{qid}要一致
这是动态sql的用法

QuestionMapper.java

public interface QuestionMapper {
    //批量删除
    public Integer deleteMany(int[] id_arr);
}

service层

QuestionService.java

此代码由Java架构师必看网-架构君整理
public interface QuestionService { //批量删除 public Integer deleteMany(int[] id_arr); }

QuestionImpl.java

//注意这里我们加入了@Service注解,主要用来表示这就是一个Service层
@Service
//注意这里有delete方法,所以这里也必须有一个@Transaction注解用来表示事务的操作
@Transactional
public class QuestionImpl implements QuestionService { 
   
    @Autowired
    QuestionMapper qm;
    @Override
    public Integer deleteMany(int[] id_arr) {
        // TODO 自动生成的方法存根
        return qm.deleteMany(id_arr);
    }
}

controller层

QuestionController.java

@Controller
@RequestMapping(value="/tec")
public class QuestionController {

    @Autowired
    QuestionService qs;

    @RequestMapping(value="/isdeleteMany.do")
    public String deleteMany(int[] chk_value) {
        System.out.println(chk_value);
        if (chk_value == null ) {
            return "redirect:/tec/init.do";
        }
        //直接传数组
        qs.deleteMany(chk_value);
        //重定向
        return "redirect:/tec/init.do";
    }
}

前端jsp代码

tec_index.jsp

<table>
<tr>
    <td><input type="checkBox" id="selectall" name="case" onclick="cli("case")/></td>
</tr>
<tr>
    <td><input type="checkBox" id="case" name="case"/></td>
    <td>ID:<input type="text"/>1</td>
</tr>
<tr>
    <td><input type="checkBox" id="case" name="case"/></td>
    <td>ID:<input type="text"/>2</td>
</tr>
<tr>
    <td><input type="checkBox" id="case" name="case"/></td>
    <td>ID:<input type="text"/>3</td>
</tr>
</table>

这个是简化后的表格结构不包含css

tec_index.jsp js部分

<script type="text/javascript"> function todelete() { 
     var msg = "确认删除选中试题"; if(confirm(msg)==true){ var chk_value = [];//定义一个数组 //利用将name等于ids的多选按钮得到 $("#tableId").find(":input[id='case']:checked").each(function(){ 
     //获取id值,因为id单元格在复选框单元格的下一个元素 var val = $(this).parent().next().text(); //将id值添加到数组 chk_value.push(val); }); if (chk_value.length == 0) { alert("你还没有选择任何内容!"); } if (chk_value.length > 0) { //在浏览器控制台打印信息 console.log(chk_value); location.href = "${ctx}/tec/isdeleteMany.do?chk_value=" + chk_value; } } } </script>

注解说明:
1.tableId:表格的id
2.case:表格每一行的复选框的name属性值
3. var val = (this).parent().next().text();idvarval= (this).parent().prev().text();
如果你想获取的值的所在单元格不在复选框隔壁可以这样获取
var val = (this).parents(td:eq(0)).text(); (this).parents可以获取复选框所在行单元格的所有单元格的集合,而td:eq(0)就是获取该行的第1个单元格
http://blog.csdn.net/cui_angel/article/details/7903704
可以看上面这个博客介绍很详细
技巧说明:
1.批量删除时前端要获取勾选的id值,封装在数组中,然后通过get请求发送到后端
2.后端用一个int[]数组接收,因为dao层批量删除参数也是int[]数组,所以吻合,可以进行批量删除操作

tec_index.jsp js部分

点击一个复选框进行全选和取消操作

function cli(Obj){

     var collid = document.getElementById("selectall")
     var coll = document.getElementsByName(Obj)
     if (collid.checked){
      for(var i = 0; i < coll.length; i++)
      coll[i].checked = true;
     }else{
      for(var i = 0; i < coll.length; i++)
      coll[i].checked = false;
     }
}

删除确认对话框js代码

<script> var msg = 确认删除吗"; if(confirm(msg)){ //对话框确认执行的操作 } else { //反之操作 } </script>
本文来源mozha_csdn,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/209691
0

发表评论