复选框全选全不选反选加批量删除

最新推荐文章于 2021-04-28 16:53:21 发布

原创最新推荐文章于 2021-04-28 16:53:21 发布 · 458 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #后端

java 同时被 3 个专栏收录

24 篇文章

订阅专栏

15 篇文章

订阅专栏

SQL

1 篇文章

订阅专栏

博客介绍了前端复选框操作及后端批量删除功能。前端方面，讲述了给复选框设置id和使用js实现全选、全不选；后端方面，涉及后台接收数据、接口类、业务层、映射mapper.xml接口，且删除采用假删除，仅改变状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看图

一，全选，全不选

1.如何给复选框设置id

 	这个是第一个复选框即全选全不选反选按钮
<div>
	 <input type="checkbox" id="qx" style="width:16px; height:16px; border:1px solid: #aaa; background:#FFF;">
</div>
  这是foreach循环中的复选框 这个里面要确定每条数据的id即id="${product.id }"，还有class选择器ids，这条数据id对应的value
<div>
 <input type="checkbox" id="${product.id }"  class="ids" value="${product.id }" name="test" style="width:16px; height:16px; border:1px solid: #aaa; background:#FFF;">
</div>

2.再看js

  //全选，全不选
	    $("#qx").click(function () {
	        if(this.checked){
	            $(".ids").each(function () {
	                $(this).prop("checked", true);
	            })
	        }else{
	            $(".ids").each(function () {
	                $(this).removeAttr("checked");
	            })
	        } 
	    });
	    //反选
	     $(".ids").change(function () {
	        $(".ids:checked").length == $(".ids").length ? $("#qx").prop("checked", true) : $("#qx").prop("checked", false);
	    })

二，如何批量删除呢：

 //批量删除
 function deleteAll(){
	   根据test name属性得到选中的id，以字符串的形式拼接
	    obj = document.getElementsByName("test");
	    ids = [];
	    for(k in obj){
	        if(obj[k].checked)
	            ids.push(obj[k].value);
	    }
	    if(ids==""){
	    	layer.alert("请选择要删除的商品！！！");
	    }else{
	    	layer.confirm('请确认是否删除选中的商品', {
		    	btn: ['删除','取消'] //按钮
		    	}, function()
		    	{
		    		 $.post(
	    			       "/user/system/deleteAll?ids="+ids,
	    			       function(obj){
	    			    	   if(obj=="200"){
	    			    		   layer.alert('删除成功！', function(index){
	    							   window.location.href="/user/system/productMangerList?status="+status;
	    							 });
	    			    	   }else{
	    			    		   layer.alert("删除失败");
	    			    	   }
	    			       },
	    			       "text"
	    			    );
		    	 });
	     }
	 
 }

3.后台如何接收呢

@Controller
@RequestMapping(value = "user/system/")
public class ProductController { 

       @Autowired
	private IUserService userService;
  
    /*
	 * 批量删除
	 */
	@RequestMapping(value = "/deleteAll", method = RequestMethod.POST)
	@ResponseBody
	public String deleteAll (String ids){
		return productService.deleteAll(ids);
	}
}

4.接口类

public interface IProductService {

    String deleteAll(String ids);
}

5，业务层

@Service
public class ProductServiceImpl implements IProductService{

        @Autowired
	private IProductMapper productMapper;

	@Override
	public String deleteAll(String ids) {
		try {
              //截取“，”通过for循环把数据根据id一个一个删除
			String[] productId = ids.split(",");
			int p =0;
			for (int i = 0; i < productId.length; i++) {
				 p =productMapper.deleteProduct(productId[i]);
			  }
			  if (p>0) {
					log.info("商品删除成功！！！！！");
					return "200";
				}
		
		} catch (Exception e) {
		e.printStackTrace();
		}
		return "500";
	}
}

6.映射mapper.xml 接口

public interface IProductMapper {

	int deleteProduct(String id);
}

7.mapper.xml 写sql 这个的删除都是假删除，只是改变一下状态。

    <!-- 商品删除 -->
	<update id="deleteProduct" parameterType="string">
		update t_sys_product
		set status = 3 ,updateTime = NOW() where id = #{id}
	</update>

Over!!！