基于springboot和ajax的简单项目 06 日志界面的delete功能（根据选择的checkbox）-Toy模板网

这篇具有很好参考价值的文章主要介绍了基于springboot和ajax的简单项目 06 日志界面的delete功能（根据选择的checkbox）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

01.这次后台开始；
顺序依次是dao->xml->service->serviceimpl->controller->html

02.dao接口

public int doDeleteObjects(@Param("ids") Integer... ids);

03.xml文件

<update id="doDeleteObjects" >
        delete from sys_logs
        <choose>
        <when test="ids.length>0 and ids!=null">
            <where>
                    <foreach collection="ids"  separator="or" item="id">
                        id=#{id}
                    </foreach>
            </where>
        </when>
        <otherwise>
            where 1==2
        </otherwise>
        </choose>

    </update>

04.service接口

 public  int doDeleteObjects(@Param("ids")Integer... ids) ;

05.serviceimpl实现类

 @Override
    public int doDeleteObjects(Integer... ids) {
        if (ids.length==0||ids==null)
        {
        throw  new IllegalArgumentException("请选择一个");
        }
        int rows=0;
        try {
            rows=sysLogdao.doDeleteObjects(ids);
        }catch (Throwable e)
        {
            e.printStackTrace();
            throw new serivceException("系统在修复中");
        }
        if (rows==0)
        {
            throw new serivceException("数据不存在");
        }
        return rows;
    }

06.controller类

 @RequestMapping("doDeleteObjects")
    @ResponseBody
    public JsonResult doDeleteObjects(Integer...ids){
        int rows= syslogservice.doDeleteObjects(ids);
        return new JsonResult("OK");
    }

07.html文件

先在自动加载的函数中声明点击事件（delete功能）

$(".input-group-btn").on("click",".btn-delete",doDeleteObjects)

再去声明delete函数，使用的ajax的post方法。
其中的params是string类型的参数。





   function doDeleteObjects() {
	   var url="log/doDeleteObjects";
	   var ids=doGetCheckedIds();
	   if(ids.length==0){
		   alert("至少选择一个");
		   return;
	   }
	   var params={"ids":ids.toString()};
	   $.post(url,params,function (result) {
		   //请问result是一个字符串还是json格式的js对象？对象
		   if(result.state==1){
			   alert(result.message);
			   doGetObjects();
		   }else{
			   alert(result.message);
		   }
	   })

   }
   
   function doGetCheckedIds() {
	   //定义一个数组,用于存储选中的checkbox的id值
	   var array=[];//new Array();
	   //获取tbody中所有类型为checkbox的input元素
	   $("#tbodyId input[type=checkbox]").
			   //迭代这些元素，每发现一个元素都会执行如下回调函数
			   each(function(){
				   //假如此元素的checked属性的值为true
				   if($(this).prop("checked")){
					   /调用数组对象的push方法将选中对象的值存储到数组
					   array.push($(this).val());
				   }
			   });
	   return array;

   }

用到的html中的方法：

使用的each方法遍历，$(this)表示当前元素
基于springboot和ajax的简单项目 06 日志界面的delete功能（根据选择的checkbox）

使用prop获取当前的属性：checked是一个表单标签input中的属性，就叫做checked。

涉及到的html标签

<td><input type='checkbox' class='cBox' name='cItem' value='"+data.id+"'></td>

基于springboot和ajax的简单项目 06 日志界面的delete功能（根据选择的checkbox）

这个是单个选中后的功能

那全选的delete功能是如何实现的？

08.首先就是实现全选后所有的在那一页出现的checkbox都可以被选中。

先给全选按钮增加点击事件。由于是表单，而且需要的是01.全选后02.在按下delete按钮后才可以delete
这里使用的是change函数，不是click函数

（一般button用click点击事件，表单的input【type=checkbox】使用的是change事件）

$("#checkAll").change(doChangeTBodyCheckBoxState)

基于springboot和ajax的简单项目 06 日志界面的delete功能（根据选择的checkbox）

#checkAll是id属性是checkAll的一个input【type=checkbox】的标签，表示全选

通过prop来获取checked属性的值，而后把table中的input【type=checkbox】的标签的checked属性的值都改成真

jQuery中的prop函数的取值和赋值两种用法。

//修改tbody中checkbox对象状态
function doChangeTBodyCheckBoxState() {
   //1.获取当前点击对象的checked属性的值
   var theadCheckBoxState = $(this).prop("checked");
   //2.将tbody中所有checkbox元素的值都修改为checkall对应的值。
   $("#tbodyId input[type=checkbox]").prop("checked",theadCheckBoxState);

}

那么，如果table中显示的某一行数据取消的选择，那么全选按钮应该不被勾选才对。
同样在table（id=tbodyId）的input【type=checkbox】有一个change事件
在自动加载函数中使用：

 $("#tbodyId").on("change",".cBox",doChangeTHeadCheckBoxState);
});

//修改thead中的checkbox对象的状态
function doChangeTHeadCheckBoxState() {
   //1.定义变量表示，默认值为true
   var flag=true;
   //2.获取所有的tbody中的checkbox对象的值，进行逻辑与操作
   $("#tbodyId input[type='checkbox']").each(function () {
      flag=flag&&$(this).prop("checked"); //true&&true/false
   })
   //3.修改thread中的checkbox对象状态
   $("#checkAll").prop("checked",flag);
}

更新页面后，全选按钮不选中：
这个功能要在更新table数据的函数中去添加：

$("#checkAll").prop("checked",false);


	function doGetObjects() {
		$("#checkAll").prop("checked",false);
        //发送json请求，接受数据
		//1.定义url和参数
		var pageCurrent=$("#pageId").data("pageCurrent");
		//为什么要执行如下语句的判定，然后初始化pageCurrent的值为1
		//pageCurrent参数在没有赋值的情况下，默认初始值应该为1.
		if(!pageCurrent) pageCurrent=1;
		var params={"pageCurrent":pageCurrent};//pageCurrent=2
		var username=$("#searchNameId").val();
		if(username) params.username=username;//查询时需要
		var url="log/doFindPageObjects";
		//2.发起异步请求,getjson方法
		$.getJSON(url,params,function (result) {
			//请问result是一个字符串还是json格式的js对象？对象
		console.log(result);
		dohandlerresult(result);
		})

	}

09.调试bug，如果在最后一页使用全选delete功能的时候，pageCurrent的值不能像往常一样，从后+1更新table中的数据，而是需要-1，向前去更新数据。

  function doRefreshAfterDeleteOK(){
	   var pageall=$("#pageId").data("pageall");
	   var pageCurrent=$("#pageId").data("pageCurrent");
	   var checked=$("#checkAll").prop("checked");
	   if(pageCurrent==pageall&&checked&&pageCurrent>1){
		   pageCurrent--;
		   $("#pageId").data("pageCurrent",pageCurrent);
	   }
	   doGetObjects();
   }

这里的data接受的数据是在page.html那个分页功能是已经存好了。

这里需要更新delete函数：文章来源地址https://www.toymoban.com/news/detail-417773.html

function doDeleteObjects() {
   var ids=doGetCheckedId();
   if (ids.length==0){
      alert("至少选一个");
      return;
   }
   if(!confirm("确认删除吗？"))return;
   var url="log/doDeleteObjects";
   var params={"ids":ids.toString()};
   console.log(params);
   $.post(url,params,function (result) {
      if(result.state==1){
         alert(result.message);
         //doGetObjects();
                  doRefreshAfterDeleteOK();
      }else {
         alert(result.message);
         
      }
   });

}

到了这里，关于基于springboot和ajax的简单项目 06 日志界面的delete功能（根据选择的checkbox）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！