SSM整合Project-Day01-日志删除操作的实现+全选功能

一、Dao

//    根据日志id删除日志上的记录
    int deleteObject(@Param("ids") Integer... ids);

二、映射文件-SysLogMapper.xml

    <!--根据日志id删除日志信息-->
    <delete id="deleteObjects">
        delete from sys_logs where id in
        <foreach collection="ids"
                 open="(" close=")"
                 separator=","
                 item="item">
                 #{item}
        </foreach>
    </delete>

三、做一下测试

//	测试日志删除
	@Test
	public void testDeleteObjects(){
	SysLogDao dao=ctx.getBean("sysLogDao", SysLogDao.class);
	int rowCount=dao.deleteObjects(37,38);
	System.out.println(rowCount);

四、service

//    日志删除功能。删除操作删掉了几行      ids日志记录的id
      Integer deleteObjects(Integer... ids);

五、service实现类，思考service功能的逻辑

1.参数有效性验证
2.执行删除操作
3.验证并返回结果

@Override
    public Integer deleteObjects(Integer... ids) {
        //1.参数有效性验证
        if(ids.length==0&&ids==null){
            throw new IllegalArgumentException("请选中要删除的记录");
        }
        //2.执行删除操作    返回要删除的行数    【若tomcat服务器与删除执行发生断连接】
        int rows=0;
        try{
            rows = sysLogDao.deleteObjects(ids);
        }catch (Throwable e){
            e.printStackTrace();
//          给运维人员发短信并报警
            throw new ServiceException("系统维护中，稍等片刻");
        }

        //3.验证并返回结果
        if(rows==0){
            throw new ServiceException("这个记录不存在");
        }
        return rows;
    }

六、Controller

    //    映射地址
    @RequestMapping("doDeleteObjects")
    @ResponseBody
    public JsonResult doDeleteObjects(Integer... ids){
        sysLogService.deleteObjects(ids);
        return new JsonResult("delete ok");
    }

七、测试一下吧

访问：http://localhost:8080/ssmday4/log/doDeleteObjects?ids=35,36
结果：

以上。服务器端完成。

以下。客户端：

一、log_list.html

 $(function(){
	 $("#pageId").load("doPageUI",doGetObjects);
	 //id用#  类型用.
	 //用on    :btn-search元素上注册一个click
	 //doQueryObjects 不要小括号，用小括号表示会直接调用。
	 $(".input-group-btn")
			 .on("click","btn-search",doQueryObjects)
			 .on("click",".btn-delete",doDeleteObjects)
	 ;
 });

其中的：`	 .on("click",".btn-delete",doDeleteObjects)`

//删除选中的日志内容
 function doDeleteObjects() {
	// 1.获取选中的记录id
	 var ids=doGetCheckedIds();    //array
	 if(ids.length==0){
	 	alert("请先选中");
	 	return;
	 }
	 console.log("ids",ids.toString());
	 //  2.定义参数
	 var params={"ids":ids.toString()};//1,2,3,4 不toString只显示一个数组
	//  3.定义url
	 var url="log/doDeleteObjects";
	 // 4.发送异步请求 并执行删除操作
	 $.post(url,params,function (result) {
		  if(result.state==1){
		  	alert(result.message);
		  	doGetObjects();//再次查询，刷新页面
		  }else{
		  	alert(result.message);
		  }
	 })
 };
 
 function doGetCheckedIds() {
 	//定义数组存储选中的id值
	 var array=[];
 	//获取tbody中所有的checkbox对象
	 $("#tbodyId input[type='checkbox']")
			 //迭代所有的checkbox
			 .each(function () {    //发现checkbox则回调此函数
				   if($(this).prop("checked")){
					   //如果是true，用push方法用于向数组中放数据
					   array.push($(this).val())
				   }
			 });
	 return array;
 }

二、测试一下

1.一个都不选

2.选删119

3.删除2条记录

三、全选功能

1.找到checkbox的id

$(function(){
	 $("#pageId").load("doPageUI",doGetObjects);
	 //id用#  类型用.
	 //用on    :btn-search元素上注册一个click
	 //doQueryObjects 不要小括号，用小括号表示会直接调用。
	 $(".input-group-btn")
			 .on("click","btn-search",doQueryObjects)
			 .on("click",".btn-delete",doDeleteObjects);
	 //对thead的操作 全选
	 $("thead").on("change","#checkAll",
			 doChangeTBodyCheckBoxState);
 });
 
 //全选   更新tbody中的checkBox对象的状态
 function doChangeTBodyCheckBoxState() {
 //	获取当前点击对象tbody中的checkBox对象的状态
	 var state=$(this).prop("checked");
	// 将此状态应用到tbody中的checkbox对象上

	 $("#tbodyId input[type='checkbox']")
			 .each(function () {
				 $(this).prop("checked",state);
			 });
	// 
 }

2.测试：

四、问题：当取消了列表中的一条记录，全选勾选应当立即消失。

解决：

$(function(){
	 $("#pageId").load("doPageUI",doGetObjects);
	 //id用#  类型用.
	 //用on    :btn-search元素上注册一个click
	 //doQueryObjects 不要小括号，用小括号表示会直接调用。
	 $(".input-group-btn")
			 .on("click","btn-search",doQueryObjects)
			 .on("click",".btn-delete",doDeleteObjects);
	 //对thead的操作 全选
	 $("thead").on("change","#checkAll",
			 doChangeTBodyCheckBoxState);
	 //当全选中的一条记录不勾选了，全选勾选消失
	 //让tbody中的checkbox状态的变化影响thead中的checkbox状态
	 $("#tbodyId").on("change",".cBox",
			 doChangeTHeadCheckBoxState);
 });

// 让tbody中的checkbox状态的变化影响thead中的checkbox状态
 function doChangeTHeadCheckBoxState() {
	 var flag=true;
	 //1.获取所有tbody中的checkbox对象状态“与”结果
	 $("#tbodyId input[type='checkbox']")
			 .each(function(){
				 flag=flag&&$(this).prop("checked");
			 })
	 //2.将tbody中的checkbody的值福遇到thead中的值
	 $("#checkAll").prop("checked",flag);
 }

五、运行结果