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

news2024/10/2 16:27:47

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)表示当前元素
在这里插入图片描述


使用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.定义变量表示,默认值为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函数:

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);
         
      }
   });

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/428464.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

七项新发布,亚马逊云科技Amazon S3持续进化

17年前的3月14日&#xff0c;亚马逊云科技推出了一项“非常简单的”对象存储服务&#xff08;Amazon Simple Storage Service&#xff09;。该服务允许开发人员创建、列出和删除私有存储空间&#xff08;称为存储桶&#xff09;、上传和下载文件以及管理其访问权限。当时&#…

C++刷题--选择题1

文章目录选择题选择题 1&#xff0c; 以下for循环的执行次数是&#xff08;&#xff09; for(int x 0, y 0; (y 123) && (x < 4); x);A 是无限循环 B 循环次数不定 C 4次 D 3次 解析 &#xff1a; C&#xff0c;for循环y 123 是赋值语句&#xff0c; 也就是一…

PSO算法

&#x1f34e;道阻且长&#xff0c;行则将至。&#x1f353; 目录1.PSO算法主要步骤&#x1f331;2.PSO更新方法&#x1f33e;3.PSO求解TSP问题&#x1f334;粒子群算法&#xff08;Particle Swarm Optimization&#xff0c;简称PSO&#xff09;是一种优化算法&#xff0c;模拟…

美国全力打击币圈 “一套花式组合拳”,打得从业者透不过气

银行危机“平息”过后&#xff0c;美国监管机构对币圈接连出手&#xff0c;一套花式组合拳打得从业者透不过气&#xff0c;也使得加密行业在政府的拳头之下风声鹤唳。 首先&#xff0c;切断加密货币与传统金融机构的联系。美国金融体系陷入混乱之际&#xff0c;一系列历史性的银…

顺序表(数据结构)

目录 线性表 顺序表 1、顺序表创建 2、初始化 3、扩容 4、尾插 5、尾删 6、头插 7、头删 8、指定位置插入 9、指定位置删除 10、查询 11、打印 12、销毁 顺序表总代码 Leetcode编程题 1、移除元素 题目链接&#xff1a; 题目描述&#xff1a; 题目解析&#xff1a; 2、删除有序…

游戏内嵌社区服务开放,助力开发者提升玩家互动与留存

华为 HMS Core 游戏内嵌社区服务提供快速访问华为游戏中心论坛能力&#xff0c;支持玩家直接在游戏内浏览帖子和交流互动&#xff0c;助力开发者扩展内容生产和触达的场景。 一、为什么要游戏内嵌社区&#xff1f; 二、游戏内嵌社区的典型使用场景 1、游戏内打开论坛 您可以在…

[Linux]环境变量

目录 基本概念 常见的环境变量 PATH测试 HOME测试 SHELL测试 和环境变量相关的命令 main函数的三个参数 环境变量的组织方式 通过代码如何获取环境变量 通过系统调用获取或设置环境变量 基本概念 环境变量(environment variables)一般是指在操作系统中用来指定操作系…

FreeRTOS 系统内核控制函数

FreeRTOS 中有一些函数只供系统内核使用&#xff0c;用户应用程序一般不允许使用&#xff0c;这些 API 函数就是系统内核控制函数。 内核控制函数 顾名思义&#xff0c;内核控制函数就是 FreeRTOS 内核所使用的函数&#xff0c;一般情况下应用层程序不使用这些函数&#xff0…

6基于二阶锥规划的主动配电网最优潮流求解

matlab代码&#xff1a;基于二阶锥规划的主动配电网最优潮流求解 参考文献&#xff1a;主动配电网多源协同运行优化研究_乔珊 摘要&#xff1a;最优潮流研究在配 电网规划运行 中不可或缺 &#xff0c; 且在大量分布式能源接入 的主动配 电网环境下尤 为重要 。传统的启发式算…

设计师一定要知道这5个免费样机素材网

本期推荐5个设计师必备的样机素材网站&#xff0c;免费下载&#xff0c;建议收藏~ 1、菜鸟图库 https://www.sucai999.com/searchlist/3217----all-0-1.html?vNTYxMjky 网站有多种类型的设计素材&#xff0c;像平面、电商、UI、办公等素材这里面都能找到。样机素材分类清晰&…

GitHub“疯狂”求阿里内部开源这份10W字Java面试手册,竟遭拒绝

行业风向标&#xff0c;猎聘发布的数据报告显示&#xff1a; 相比以往&#xff0c;2023年企业招聘两大变化体现在&#xff1a;对人才各方面能力要求更高、对人岗的匹配性要求更细。不同规模的企业用人各有侧重&#xff0c;大中型企业更注重人的全面能力&#xff0c;小型企业更…

我写系列博客的缘由

我写系列博客的缘由 每个经历不是一帆风顺的人&#xff0c;都将深刻地体会到&#xff0c;少走弯路对一个人来说是多么重要。人的生存不是浪漫的幻想&#xff0c;而是建立在能立足于现实社会上&#xff0c;教育的真正意义&#xff0c;是培养你的认识水平、提升智慧&#xff0c;借…

JAVA语言-比较器Comparator

目录 一、什么是Comparator 二、Java compare方法和compareTo方法 三、java中Comparable和Comparator的区别 Comparator的例子 一、什么是Comparator Comparator 是javase中的接口&#xff0c;位于java.util包下。 数组工具类和集合工具类中提供的工具方法sort方法都给出…

Vector - CAPL - CAN x 总线信息获取

在CAN&CANFD测试中&#xff0c;我们经常需要获取到CAN总线的负载、错误帧、过载帧、发送错误等等CAN总线上面的信息&#xff0c;这些信息如此重要&#xff0c;但是如果真的要写代码去实现也是相当不易的&#xff0c;那我们该如何去获取到的呢&#xff1f;下面我们就来一起看…

系统集成作业——公司网络系统集成设计,总公司、分公司地跨两个不同城市。

一 实验需求 完成公司网络系统集成设计&#xff08;2000台电脑&#xff09;&#xff0c;总公司、分公司地跨两个不同城市 二实验分析 本次实验继续建立在实验三的基础之上&#xff0c;对其升级改造为地跨不同城市的总公司和分公司的大型局域网网建设。 实验三配置点击链接&…

经营软件公司五年,从外包到SaaS的踩坑笔记

文章目录摘要开公司的两个误区关于管理关于合作关于SaaS其他经验大和强是两码事。大不是目的&#xff0c;强才是。小步试错、慢慢迭代不要掉入流量陷阱摘要 经营公司已有五年&#xff0c;经历了三年的疫情停滞&#xff0c;现在正在转型为一家SaaS公司。虽然曾经迷茫过&#xf…

包装类,String,String的方法

针对八种基本数据类型相应的引用类型-----包装类。有了类的特点&#xff0c;就可以调用类中的方法 基本数据类型包装类booleanBoolean char CharacterbyteByteshortShortintIntegerlongLongfloatFloatdoubleDouble Byte---Double类的父类是Number 关系图 拆箱&#xff0c;装箱 …

如何微调Segment Anything Model

文章目录什么是SAM&#xff1f;什么是模型微调&#xff1f;为什么要微调模型&#xff1f;如何微调 Segment Anything 模型背景与架构创建自定义数据集输入数据预处理训练设置循环训练保存检查点并从中启动模型下游应用程序的微调随着 Meta 上周发布的 Segment Anything Model (…

DAY 33 shell编程 常用的文本命令

sort命令####排序 sort将文件的每一行作为一个单位相互比较&#xff0c;比较原则是从首字符向后依次按ASCII码进行比较&#xff0c;最后将它们按升序输出。&#xff08;以行为单位来排序输出&#xff09; sort [选项] 参数​cat file | sort 选项常用选项&#xff1a; 常用选…

计算机综合题汇总

(数学计算题) 把6个相同的球分到三个不同的学生身上,允许有的学生没有球,请问有多少种不同的方法? C(8,2)=28。 典型的插板问题,直接套公式,C(n+m-1,m-1)。6个球,本身5个空,有同学可以不分,再加3个空,共8个空;插入2个板。 (软件选择题) 软件质量保证是什么? A. 确保…