MP实战系列(十三)之批量修改操作(前后台异步交互)

MyBatis的批量操作其实同MyBatis基本是一样的。并无多大区别，要说区别，除了封装的方法之外，主要就是注解方面的区别，比如@TableId、@TableField、@TableName等等区别。

示例描述:

本次描述的是批量相关的操作，主要是批量修改等操作。

项目讲解:如何批量修改开锁方式？

准备环境和IDE工具:MySQL5.7+Maven3以上+JDK8或者JDK7+SSM框架+tomcat8或者tomcat7应用服务器+Eclipse。

本文核心:主要是Controller代码和数据传输对象和js文件中的test2()方法内的ajax。

其他的只是附加的，便于博主我个人以后回顾比较个人代码风格是否有所进步。我的理想是写一手优雅的代码。

注意:特别是有经验的开发者们，本文核心代码可用供你们参考

一、准备实体

@TableName("`lock`")
public class LockEntity implements Serializable {
private static final long serialVersionUID = 1L;

/**
*
*/
private Integer id;

@TableId
private String lock_no;

@TableField("house_code")
private String houseCode;

@TableField("room_code")
private String roomCode;

@TableField("install_time")
private String installTime;

@TableField("lock_kind")
private Integer lockKind;

private Integer power;

@TableField("power_update_time")
private String powerUpdateTime;

@TableField("comu_status")
private String comuStatus;

@TableField("comu_status_update_time")
private String comuStatusUpdateTime;

private String region;

private String address;

@TableField("guarantee_time_start")
private String guaranteeTimeStart;

@TableField("guarantee_time_end")
private String guaranteeTimeEnd;

private Integer doorsensor;

private String description;

@TableField("hardware_version")
private String hardwareVersion;

private Integer type;

@TableField("verify_code")
private String verifyCode;

private String no;

@TableField("housing_code")
private String housingCode;

@TableField("first_open_way")
private String firstOpenWay;

@TableField("laster_open_way")
private String lasterOpenWay;

@TableField(value="node_no",exist=false)
private String nodeNo;

@TableField(value="user_id")
private String userId;

private Integer status;

@TableField(exist=false)
private String name;

set get方法省略....
}

二、编写DAO

public interface LockDao extends BaseMapper<LockEntity> {
/**
* 批量更新门锁开锁方式
* @param lock
* @return
*/
public void updateLockOpenLockWayInfo(@Param ("lock") List<LockEntity> lock);

}

xml代码:

<!-- 批量更新门锁开锁方式 -->
<update id="updateLockOpenLockWayInfo" parameterType="java.util.List">
<foreach collection="lock" item="lock" index="index" separator=";">
update `lock`
<set>
first_open_way=#{lock.firstOpenWay},
laster_open_way=#{lock.lasterOpenWay}
</set>
where id=#{lock.id}
</foreach>

</update>

三、编写Service代码

public interface LockService extends IService<LockEntity> {

/**
* 批量更新门锁开锁方式
* @param lock
* @return
*/
public void updateLockOpenLockWayInfo(@Param ("lock") List<LockEntity> lock);

}

四、编写Service实现类

@Service("lockService")
public class LockServiceImpl extends ServiceImpl<LockDao, LockEntity> implements LockService {

@Override
public void updateLockOpenLockWayInfo(List<LockEntity> lock) {
// TODO Auto-generated method stub
lockDao.updateLockOpenLockWayInfo(lock);
}

}

五、Controller代码

@RestController
@RequestMapping("/lock")
public class LockController {

private static Logger logger = Logger.getLogger(LockController.class);

@Autowired
private LockService lockService;

/**
* 批量修改开锁方式
* @param openLockWayQueryVoy
* @return
*/
@PostMapping(value="/updateLockOpenLockWayInfo",produces="application/json;charset=utf-8")
public Object batchUpdateLockOpenLockWayInfo(@RequestBody OpenLockWayQueryVo openLockWayQueryVo) {

Integer ids[]=openLockWayQueryVo.getIds();
String items[]=openLockWayQueryVo.getItems();
String items2[]=openLockWayQueryVo.getItems2();
JSONObject json = new JSONObject();

try {
String str="";
for (int i = 0; i < items.length; i++) {
if(items[i].equals("on")) {
items[i]="0";
}else if(items[i].equals("0")) {
items[i]="1";
}
str+=items[i];
logger.info("items[i]:"+str);

}
String str2="";
for (int j = 0; j < items2.length; j++) {
if(items2[j].equals("on")) {
items2[j]="0";
}else if(items2[j].equals("0")) {
items2[j]="1";
}
str2+=items2[j];
logger.info("items2[i]:"+str2);

}

String first=str+"00000";
logger.info("first:"+first);

String laster=str2+"00000";
logger.info("laster:"+laster);

for (int i = 0; i < ids.length; i++) {
logger.info("ids[i]:"+ids[i]);
LockEntity lockEntity = new LockEntity();
lockEntity.setId(ids[i]);
lockEntity.setFirstOpenWay(first.substring(0,8));
lockEntity.setLasterOpenWay(laster.substring(0,8));
List<LockEntity> list = new ArrayList<LockEntity>();
list.add(lockEntity);

//批量修改方法调用
lockService.updateLockOpenLockWayInfo(list);

}
json.put("returnMsg", "批量修改成功");
json.put("returnCode", "000000");
} catch (Exception e) {
e.printStackTrace();
json.put("returnMsg", "批量修改失败");
json.put("returnCode", "111111");
}

return json;

}
}

六、编写数据传输对象

public class OpenLockWayQueryVo{

Integer ids[];

String items[];

String items2[];

set get方法此处省略....

}

七、前端HTML代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<!--     <script src="../js/tologin.js"></script> -->
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link type="image/x-icon" href="/../images/fav.ico?rel=1522142498852" rel="shortcut icon"/>
<link rel="stylesheet" href="../fonticon/iconfont.css?rel=1522142498852" />
<link rel="stylesheet" href="../css/normalize.min.css?rel=1522142498852"/>
<link rel="stylesheet" href="../css/app.min.css?rel=1522142498852"/>
<link rel="stylesheet" href="../css/lock-css.min.css?rel=1522142498852"/>
<link rel="stylesheet" href="../css/node-css.min.css?rel=1522142498852"/>
<link rel="stylesheet" href="../css/common.min.css?rel=1522142498852"/>
<link rel="stylesheet" href="../js/limarquee/liMarquee.css"/>
<link rel="stylesheet" href="../css/ammeter-css.min.css"/>
<link rel="stylesheet" href="../layui/css/modules/layer/default/layer.css" media="all">

<title>批量修改开锁方式</title>
<style>
#menu li[data-body='lockList'],#menu li[data-body='nodeList'],#menu li[data-body='index']{
display: none;
}
.yw_list table th {
font-size: 12px;
background-color: #dcdcdc;
height: 36px;
line-height: 36px;
}
.yw_list table td {
text-align: center;
font-size: 12px;
color: #1f2f3e;
height: 38px;
word-break: break-all;
word-wrap: break-word;
line-height: 20px;
border:1px #ddd solid;
}
.yw_list table tr:nth-child(odd){background:#f3f3f3;}
.yw_list table tr:nth-child(even){background:#fff;}
</style>
<script src="../js/baiduTemplate.js"></script>
<body>

<div class="warper" data-body="userManage">

<!--s: sidebar-->
<div class="sidebar" id="sidebar">
<a href="javascript:;" id="showBar"><i class="iconfont icon-icon-test15"></i></a>
<div class="user-pic">
<div class="user-picn">
<span id="applytop-div-wrap-user" class="applytop-div-wrap" style="background: url('../images/3-30.png') no-repeat center; -webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;background-size: cover;">
</span>
<span class="png6"></span>
</div>
<p id="sidebarName"></p>
</div>
<ul class="menu" id="menu">
<!--<li data-body="home" style="display: none;"><a class="png6" href="home.html"><em class="iconfont icon-pingtai" style="position: relative;right: -4px;"></em><span>平台主页</span></a></li>-->
<li data-body="lockList" style="display: block;"><a class="png6" href="lockList.html"><em class="iconfont icon-icon-test" style="position: relative;right: -4px;"></em><span>智能门锁</span></a></li>
<li data-body="nodeList" style="display: block;"><a class="png6" href="nodeList.html"><em class="iconfont icon-icon-test2"></em><span>智能网关</span></a></li>
<li data-body="ammeterList" style="display: none;"><a class="png6" href="ammeterList.html"><em class="iconfont icon-dianbiao1"  style="vertical-align:middle;font-size:25px"></em><span>智能电表</span></a></li>
<li data-body="userManage" class="menu-f" style="display:none;"><a class="png6" href="userManageList.html"><em class="iconfont icon-guanli" style="font-size: 1.8em;position:relative;top:4px;"></em><span style="padding-left:5px;">审批管理</span></a></li>
<li data-body="mySet"><a href="mySet.html"><em class="iconfont icon-icon-test1"></em><span>个人中心</span></a></li>
<li data-body="index" class="menu-f" style="display: block;"><a class="png6" href="index.html"><em class="iconfont icon-icon-test11"></em><span>统计分析</span></a></li>
</ul>
</div><!--e: sidebar-->

<!--s: toper-->
<div class="toper">
<div class="icon"><img src="../images/3-30.png" width="80" height="60" alt=""></div>
<div class="loginout" >
<a class="png6" href="javascript:;" id="link_loginOut"><i class="iconfont icon-icon-test9"></i><span id="exit">退出</span></a>
</div>
</div><!--e: toper-->

<!--通知-->
<div id="pageInfo"><div class="dowebok" id="marTxt"></div></div>

<!--s: container-->
<div class="container" id="container">

<div class="h60"></div>

<!--s: main-->
<div class="main">

<h2 class="titpos"><span class="curpage">批量修改管理</span></h2>
<!--s: part-3-->

<h3 class="clrfix subtit subtitmargin combox" style="padding:10px 0 10px 30px;">
<i class="fl subtit-l" id="yw_9">
<input id="houseCode" type="text" class="add_ftxt" placeholder="房源编号" style="width:214px;background:#f3f3f3" maxlength="45">
<input id="roomCode" type="text" class="add_ftxt" placeholder="房间编号" style="width:214px;background:#f3f3f3" maxlength="45">
<a class="addbtn red" id="J_addSearch_hong" href="javascript:;" style="margin-right:50px;margin-left:8px;">搜索</a>
<button class="layui-btn" style="float:right;" onclick="test()">开锁方式批量设置</button>
</i>
<span class="fr wordicos" style="margin-top:7px; display: none;">
<span class="word_w" id="locknum_1">共 <span class="red" id="rows"></span> 条数据</span>
</span>
</h3>

<div id="user_search" class="clrfix part-s part-3 combox" style="display: none;">

<ul class="ful lockmnglist lockmnglist2" id="forSelect1"></ul>

</div><!--e: part-3-->

<div id="yw_list" class="clrfix part-s yw_list combox">
<span style="line-height: 40px;">数据列表</span>
<table class="alert-tb tdh60" width="100%" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<tr>
<th width="60">选择</th>
<th>门锁编码</th>
<th>房源编码</th>
<th width="150">房间编码</th>
<th width="100">门锁类型</th>
<th width="100">是否支持门磁</th>
<th width="100">通信状态</th>
<th width="100">电池电量</th>
<th width="100">安装地址</th>
<th width="100">安装时间</th>
<th width="100">运营商</th>
<th width="100">网关</th>
<th width="100">操作</th>
</tr>
</thead>
<tbody id="list">

</tbody>
</table>
</div>
<!--s: pages-->

</div><!--e: main-->

<div class="h60"></div>

</div><!--e: container-->

</div>

<!--s: over-->
<div class="over" id="over"></div>
<!--e: over-->

<!--s: dialog-->
<div class="msg" id="msg">
<div class="msgtit" style="background:#e70012"><p style="color:#fff;"></p><a href="javascript:;" title="点击关闭">X</a></div>
<div class="msgcon">
<div class="msginner">
<div tabindex="5" class="confirm"></div><!--alert confirm dialog-->
</div>
</div>
</div>
<!--js-->
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/jquery.cookie.min.js"></script>
<script src="../js/common/common.js"></script>
<script src="../layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/common/common.js"></script>
<script type="text/javascript" src="../js/lock/companyLockList.js"></script>
<div id="ldings" class="ldings">
<span></span>
</div>

</body>
</html>

八、主要核心js代码

function test2(){
var ids = [];//定义一个门锁编号空数组

//初次开锁方式空数组
var items = [];

//后续开锁方式空数组
var items2=[]

$("input[name='lock_id']:checked").each(function(i){//把所有被选中的复选框的值存入数组
ids[i] =$(this).val();

});

$("input[name='first_way']").each(function() {

items.push($(this).val());

});

$("input[name='laster_way']").each(function() {

items2.push($(this).val());

});

var first = $('input[name="first_way"]:checked').length;
var laster = $('input[name="laster_way"]:checked').length;

if(first<2){
layui.use('layer', function(){
var layer = layui.layer;

layer.alert("初次开锁方式至少选择两种");
});

return false;
}else if(laster<2){

layui.use('layer', function(){
var layer = layui.layer;

layer.alert("后续开锁方式至少选择两种");
});

return false;
}else{

var data = {
ids:ids,
items:items,
items2:items2
}
$.ajax({

url: "/lms/lock/updateLockOpenLockWayInfo",
type: "POST",
contentType: 'application/json;charset=utf-8',
data : JSON.stringify(data),
dataType : 'json',
success: function(data){
if(data.returnCode=="000000"){
layui.use('layer', function(){
var layer = layui.layer;

layer.msg(data.returnMsg,{icon:1});
});
setTimeout(() => {

closeLayui();
}, 800);
}else{
layui.use('layer', function(){
var layer = layui.layer;

layer.alert(data.returnMsg,{icon:5});
});
}
},error:function(XMLHttpRequest, textStatus, errorThrown){
// 状态码
alert(XMLHttpRequest.status);
// 状态
alert(XMLHttpRequest.readyState);
// 错误信息
alert(textStatus);
}

});

return true;
}

}

//关闭layui弹框
function closeLayui(){
parent.layer.closeAll()
location.reload();
}

小结：通过上述例子，即可完成批量修改功能。