1.页面开发
全选钮功能
<script type="text/javascript"> //全选复选框功能实现 function allClick() { //获得当前点击后全选按钮的状态 var flag = $("#all").prop("checked"); //将此状态赋值给下面五个复选框 $("input[name='ck']").each(function () { this.checked = flag; }); } //单个复选框点击改变全选复选框功能实现 function ckClick() { //得到下面五个复选框的个数 var fiveLength = $("input[name='ck']").length; //得到下面五个复选框被选中的个数 var checkedLength = $("input[name='ck']:checked").length; //进行对比,改变全选复选框的状态 if(fiveLength == checkedLength){ $("#all").prop("checked",true); }else{ $("#all").prop("checked",false); } } </script>
2.mapper层实现
将被选中的商品的pid拼接成字符串,比如"1,4,5"上传到服务器端
<delete id="deleteBatch" > delete from product_info where p_id in <foreach collection="array" item="pid" separator="," open="(" close=")"> #{pid} </foreach> </delete>
3.service层实现
@Override public int deleteBatch(String[] ids) { return productInfoMapper.deleteBatch(ids); }
4.controller开发
//批量删除商品 @RequestMapping("/deleteBatch") //pids="1,4,5" ps[1,4,5] public String deleteBatch(String pids,HttpServletRequest request){ //将上传上来的字符串截开,形成商品id的字符数组 String []ps = pids.split(","); try { int num = productInfoService.deleteBatch(ps); if(num > 0 ){ request.setAttribute("msg","批量删除成功!"); }else{ request.setAttribute("msg","批量删除失败!"); } } catch (Exception e) { request.setAttribute("msg","商品不可删除!"); } return "forward:/prod/deleteAjaxSplit.action"; } }
批量删除结束后应该跳到deleteAjaxSplit分页上,再回到当前页面上
deleteAjaxSplit控制器那里必须有@ResponseBody表明ajax在这里进行返回
5.ajax批量删除页面判断提示
//批量删除 function deleteBatch() { //得到所有选中复选框的对象,根据其长度判断是否有选中商品 var cks = $("input[name='ck']:checked"); //1,4,5 //如果有选中的商品 if(cks.length == 0){ alert("请先选择将要删除的商品!"); }else{ var str = ""; var pid = ""; if(confirm("您确定要删除"+cks.length+"条商品吗?")){ // alert("可以进行删除!"); //获取其value的值,进行字符串拼接 $.each(cks,function () { pid = $(this).val(); //进行非空判断,避免出错 if(pid != null){ str += pid+","; //145 ===>1,4,5, } }); //发送ajax请求,进行批量删除的提交 $.ajax({ url:"${pageContext.request.contextPath}/prod/deleteBatch.action", data:{"pids":str}, type:"post", dataType:"text", success:function (msg) { alert(msg);//批量删除成功!失败!不可删除! //将页面上显示商品数据的容器重新加载 $("#table").load("http://localhost:8080/admin/product.jsp #table"); } }); } } }