今天这个小项目的增删改查都弄好了,然后想做一下批量删除,全选以及反选的这些功能,然后就奋斗了几个小时搞了出来,以此文纪念一下下。
1.批量删除。那么我们先从批量删除开始讲起,在前面的查询时候我们就遍历出了数据库里面的数据在jsp页面上了。
如果想要实现批量删除的话,在这些表格中的每一行前面都有一个选择框checkbox,首先这个选择框不是我们一个一个的加上去,而是让他跟随着遍历数据时的那个循环来进行循环,由此实现有多少条数据就有多少个选择框
创建一个input标签,然后type类型变为checkbox选择框,记住,它是放在遍历数据的那个foreach循环里面的,由上图。
最后得到的效果就是下图的带有选择框的表格。
接下来就是实现他的功能了,首先在下面定义一个input,type类型为“button”,起名为“批量删除”,然后再给他一个点击事件为delall()
首先思考一下,这个点击事件的作用是怎样的呢,就是遍历识别这些选框,看下那些是被选中的,然后当点击这个按钮的时候调用以前封装到Dao里面的deledeById方法来逐个逐个的删除这些数据
接下来我们编写这个button的点击事件,delall()
$("input[type='checkbox']:checked")这条的意思其实就是获取的条件,也选取在input标签里面,type属性为checkbox的对象而且是被选中checked的那些对象,来进行下面each循环放到一个空数组里面。记得这里获取input标签的时候别用id选择器来获取,因为这些input是循环得到的也就是id都是一样的 那么在获取的时候它只会获取到第一个被选中的input而已。
进行上述的操作以后让他交给DeleteSomeServlet.java处理,且传一个checkId数组过去
创建Servlet文件DeleteSomeServlet 在里面接收传过来的的checkId这个数组,由于request.getParameter(“”)这个方法得到的是字符串,所以我们需要将它转为数组,然后再进行切割得到他们的id,进而调用deleteById方法循环删除
这样,批量删除就实现完毕了
2.全选,反选。 上面的批量删除功能实现了以后,全选功能和反选功能就更加简单了,也只是js上面的方法不同而已,分别定义两个input,然后实现不同的js点击方法就可以了
编写js实现功能