简易jsp+servlet项目实现 批量删除,全选,反选

时间:2024-03-14 21:41:44

今天这个小项目的增删改查都弄好了,然后想做一下批量删除,全选以及反选的这些功能,然后就奋斗了几个小时搞了出来,以此文纪念一下下。

1.批量删除。那么我们先从批量删除开始讲起,在前面的查询时候我们就遍历出了数据库里面的数据在jsp页面上了。

简易jsp+servlet项目实现 批量删除,全选,反选

如果想要实现批量删除的话,在这些表格中的每一行前面都有一个选择框checkbox,首先这个选择框不是我们一个一个的加上去,而是让他跟随着遍历数据时的那个循环来进行循环,由此实现有多少条数据就有多少个选择框

简易jsp+servlet项目实现 批量删除,全选,反选

创建一个input标签,然后type类型变为checkbox选择框,记住,它是放在遍历数据的那个foreach循环里面的,由上图。

最后得到的效果就是下图的带有选择框的表格。

 

简易jsp+servlet项目实现 批量删除,全选,反选

接下来就是实现他的功能了,首先在下面定义一个input,type类型为“button”,起名为“批量删除”,然后再给他一个点击事件为delall()

简易jsp+servlet项目实现 批量删除,全选,反选

简易jsp+servlet项目实现 批量删除,全选,反选

首先思考一下,这个点击事件的作用是怎样的呢,就是遍历识别这些选框,看下那些是被选中的,然后当点击这个按钮的时候调用以前封装到Dao里面的deledeById方法来逐个逐个的删除这些数据

接下来我们编写这个button的点击事件,delall()

简易jsp+servlet项目实现 批量删除,全选,反选

$("input[type='checkbox']:checked")这条的意思其实就是获取的条件,也选取在input标签里面,type属性为checkbox的对象而且是被选中checked的那些对象,来进行下面each循环放到一个空数组里面。记得这里获取input标签的时候别用id选择器来获取,因为这些input是循环得到的也就是id都是一样的 那么在获取的时候它只会获取到第一个被选中的input而已。

进行上述的操作以后让他交给DeleteSomeServlet.java处理,且传一个checkId数组过去

创建Servlet文件DeleteSomeServlet  在里面接收传过来的的checkId这个数组,由于request.getParameter(“”)这个方法得到的是字符串,所以我们需要将它转为数组,然后再进行切割得到他们的id,进而调用deleteById方法循环删除

简易jsp+servlet项目实现 批量删除,全选,反选

这样,批量删除就实现完毕了

2.全选,反选。  上面的批量删除功能实现了以后,全选功能和反选功能就更加简单了,也只是js上面的方法不同而已,分别定义两个input,然后实现不同的js点击方法就可以了

简易jsp+servlet项目实现 批量删除,全选,反选

简易jsp+servlet项目实现 批量删除,全选,反选

编写js实现功能

简易jsp+servlet项目实现 批量删除,全选,反选