MP实战系列(十三)之批量修改操作(前后台异步交互)
Posted youcong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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(); }
小结：通过上述例子，即可完成批量修改功能。
以上是关于MP实战系列(十三)之批量修改操作(前后台异步交互)的主要内容，如果未能解决你的问题，请参考以下文章