使用jquery实现一个批量删除的功能

红太狼 2023-06-28 06:28 10阅读 0赞

***1.前端实现***  
①为所有的复选框设置一个data属性,用于获取每条数据对应的id

②js代码的实现  
注意点就是得到的id需要存放在一个数组中,在发送请求时,需要把参数的格式做一下转换,这里默认会在数组后加\[\].

//批量删除
        $(".btn_batchDelete").click(function(){ 
           //获取到所有选中的复选框
            var checkBox =  $(".acb:checked");
            //获取到每一个选中的复选框对应的id并保存到一个数组中
            //get()方法是将jquery对象转为DOM对象
            var ids = checkBox.map(function (index,item) { 
                return $(item).data("id")
            }).get();
            //发送一个ajax请求
            $.post("employee_batchDelete.action",
                //默认情况下,参数为数组时,会是数组名+[]的形式,这里需要转换一下
                //在param()中可以禁用,在js文件中加入:jQuery.ajaxSettings.traditional = true;
                { ids:ids},
                function () { 
                //操作完成之后重新加载页面
                window.location.reload();
            });
        });

***2.Java代码的实现,这里就比较简单,就是一条sql***  
只需要注意动态sql foreach的使用就可以了

<delete id="batchDelete">
    		DELETE  FROM employee WHERE id IN
    		<foreach collection="array" open="(" item="id" separator="," close=")">
    			#{ id}
    		</foreach>
    	</delete>

效果如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ_size_16_color_FFFFFF_t_70]  
3.全选操作（就是一个值改变事件）

//全选和全不选的操作
        $("#all").change(function(){ 
           //得到all的状态,将其设置给所有的子复选框
            var checked = $("#all").prop("checked");
            $(".acb").prop("checked",checked);
        });

效果如下:  
![在这里插入图片描述][20200108004234775.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200108004147455.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ==,size_16,color_FFFFFF,t_70
[20200108004234775.png]: https://img-blog.csdnimg.cn/20200108004234775.png