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