基于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实现类
@Overridepublic 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")@ResponseBodypublic 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属性的值为trueif($(this).prop("checked")){/调用数组对象的push方法将选中对象的值存储到数组array.push($(this).val());}});return array;}
用到的html中的方法：
使用的each方法遍历，$(this)表示当前元素
使用prop获取当前的属性：checked是一个表单标签input中的属性，就叫做checked。
涉及到的html标签
<td><input type='checkbox' class='cBox' name='cItem' value='"+data.id+"'></td>
这个是单个选中后的功能
那全选的delete功能是如何实现的？
08.首先就是实现全选后所有的在那一页出现的checkbox都可以被选中。
先给全选按钮增加点击事件。由于是表单，而且需要的是01.全选后02.在按下delete按钮后才可以delete
这里使用的是change函数，不是click函数
（一般button用click点击事件，表单的input【type=checkbox】使用的是change事件）
$("#checkAll").change(doChangeTBodyCheckBoxState)
#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.定义变量表示，默认值为truevar 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=2var 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函数：
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);}});}
