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

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

<td><input type="checkbox" name="IDCheck" class="acb" data-id="<s:property value="id"/>"/></td>

②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>

效果如下:

3.全选操作（就是一个值改变事件）

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

效果如下: