公司使用的是mybatis-plus以及layui，所以增加，修改，查询 为例（涉及到多个表使用的是子查询）：
mapper.xml中：
mapper.java:
service:
serviceImpl:
controller:
@RequestMapping("tempDemandmeterdataLike")
public Map<String,Object> findTempDemandmeterLike(@RequestParam(name="page") Integer pageNo,@RequestParam(name="limit") Integer pageSize,@ModelAttribute TempDemandmeter entity){ Map<String,Object> map=new HashMap<String, Object>(); Subject subject = SecurityUtils.getSubject(); Session session = subject.getSession(); entity.setUnitid(((Sysusers)session.getAttribute(SysConstants.SYSTSEM_CURRENT_USER)).getRelatedunitid()); pageNo=(pageNo==null?1:pageNo); pageSize=(pageSize==null?10:pageSize); com.github.pagehelper.Page<Object> startPage = PageHelper.startPage(pageNo, pageSize); List<Map<String,Object>> list=tempDemandmeterService.findTempDemandmeterLike(entity); map.put("data", list); map.put("count",startPage.getTotal()); map.put("code", 0); return map; }
@RequestMapping(value = {"/tempDemandmeterSave"}, method = {RequestMethod.GET})
public ModelAndView tempDemandmeterSave() {
ModelAndView model=new ModelAndView();
QueryWrapper<Skill> queryWrapper=new QueryWrapper<Skill>();
List<Skill> list=skillService.list(queryWrapper);
model.addObject("skilllist",list);
model.setViewName("/temp/tempDemandmeterSave");
return model;
}
@RequestMapping(value = {"/tempDemandmeterUpdate"}, method = {RequestMethod.GET})
public ModelAndView tempDemandmeterUpdate(Long id) {
ModelAndView model=new ModelAndView();
QueryWrapper<TempDemandmeter> queryWrapper=new QueryWrapper<TempDemandmeter>();
queryWrapper.lambda().eq(TempDemandmeter::getId, id);
List<TempDemandmeter> list=tempDemandmeterService.list(queryWrapper);
TempDemandmeter entity=list.get(0);
QueryWrapper<Skill> queryWrapper2=new QueryWrapper<Skill>();
List<Skill> skillList=skillService.list(queryWrapper2);
model.addObject("skilllist",skillList);
model.addObject("entity",entity);
model.setViewName("/temp/tempDemandmeterUpdate");
return model;
}
@RequestMapping("parserTempDemandmeter")
@ResponseBody
public Map<String, String> parserTempDemandmeter(MultipartFile filePath, HttpServletRequest request) {
Map<String, String> map = new HashMap<>();
String realPath = request.getSession().getServletContext().getRealPath(
File.separator + "WEB-INF" + File.separator + "temp"
+ File.separator + "template" + File.separator);
String filename = "";
File filepath = null;
if (!filePath.isEmpty()) {
// 上传文件名
filename = filePath.getOriginalFilename();
filepath = new File(realPath, filename);
// 判断路径是否存在，如果不存在就创建一个
if (!filepath.getParentFile().exists()) {
filepath.getParentFile().mkdirs();
}
// 将上传文件保存到一个目标文件当中
try {
filePath.transferTo(new File(realPath + File.separator
+ filename));
ParseSubjectService parseSubjectService = new ParseSubjectService();
List<TempDemandmeter> demandmeterList = parseSubjectService.parseDemandmeter(realPath + File.separator + filename);
List<Skill> skills = skillService.list();
if (demandmeterList.size() > 0) {
for (Iterator<TempDemandmeter> it = demandmeterList.iterator(); it.hasNext(); ) {
TempDemandmeter t = it.next();
if (t.getSkillname() == null || "".equals(t.getSkillname())) {
it.remove();
}
}
} else {
throw new Exception("导入文件中没有检测到内容，如刚刚编辑，请确认文件已经保存。");
}
for (TempDemandmeter t : demandmeterList) {
for (Skill s : skills) {
if (t.getSkillname().equals(s.getSkillname())) {
t.setSkillid(s.getId());
}
}
}
for (TempDemandmeter t : demandmeterList) {
if(t.getSkillid()==null){
map.put("error", "项目名称"+t.getSkillname()+"不存在");
}
}
tempDemandmeterService.saveBatch(demandmeterList);
}catch (Exception e) {
map.put("error", e.getMessage());
e.printStackTrace();
}
} else {
map.put("error", "请不要上传空的文件");
return map;
}
UserParseListener u = new UserParseListener();
try {
} catch (Exception e) {
e.printStackTrace();
map.put("error", e.getMessage());
return map;
}
filepath.delete();
return map;
}
indexController@RequestMapping("tempDemandmeter")
public ModelAndView tempDemandmeter() {
ModelAndView model=new ModelAndView();
Subject subject = SecurityUtils.getSubject();
Session session = subject.getSession();
/**
SysConstants.SYSTSEM_CURRENT_USER
登录后在session中保存用户信息常量字符串 */
Long unitid=((Sysusers)session.getAttribute(SysConstants.SYSTSEM_CURRENT_USER)).getRelatedunitid(); String sql="select skillid from temp_demandmeter where skillid is not null " ; if(unitid!=null){
//这个是下拉框的内容展示出来的
sql+=" and skillid in (select skillid from wcmsna_competition_skill where id in (select competitionskillid from wcmsna_unit_competitionskill where unitid="+unitid+"))";
}
sql+=" GROUP BY skillid";
QueryWrapper<Skill> queryWrapper=new QueryWrapper<Skill>();
queryWrapper.inSql("id",sql);
List<Skill> list=skillService.list(queryWrapper);
model.addObject("skilllist",list);
model.setViewName("/temp/tempDemandmeter");
return model;
}
html显示的页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>信息查看</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" th:href="@{/temporary/newfavicon.ico}"/>
<link rel="stylesheet" type="text/css" th:href="@{/layuiadmin/layui/css/layui.css}">
<link rel="stylesheet" type="text/css" th:href="@{/js/dist/css/newtable.css}">
<link rel="stylesheet" type="text/css" th:href="@{/js/bootstrap/css/bootstrap.css}">
<script type="text/javascript" th:src="@{/js/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/layuiadmin/layui/layui.js}"></script>
</head>
<style>
.adduser-div {
background-image: url("../js/dist/img/addbtnbackgroundimg.png");
display: inline-block;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 115px;
height: 46px;
margin-top: 8px;
cursor: pointer;
}
.upload-icon {
background-image: url("../js/dist/img/upload.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 15px;
height: 15px;
float: left;
margin: 12px;
margin-right: -13px;
}
.adduser-title {
font-size: 13px;
line-height: 39px;
font-family: MicrosoftYaHei-Bold;
font-weight: bold;
color: rgba(20, 119, 230, 1);
}
</style>
<script type="text/javascript">
$(function () {
});
function fileBtnClick(obj) {
console.log("dzdzzzzzzzzz")
$("#fileBtn").trigger('click')
}
function fileClick() {
var file = document.getElementById("fileBtn").files[0];
var filesuffix = file.name.substring(file.name.lastIndexOf("."));
if (file.name.indexOf("&", 0) > -1) {
parent.layer.msg('文件名称不能带&!', {
icon: 0,
time: 2000
})
} else {
var formData = new FormData();
formData.append("filePath", file);
fileupload(formData);
}
}
//文件上传
function fileupload(formData) {
parent.showmodal()
$.ajax({
url: '/tempDemandmeter/parserTempDemandmeter',
type: "post",
data: formData,
processData: false, // 不要对data参数进行序列化处理，默认为true
contentType: false, // 不要设置Content-Type请求头，因为文件数据是以 multipart/form-data 来编码
xhr: function () {
myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
var percent = Math.floor(e.loaded / e.total * 100);
if (percent <= 100) {
}
}
}, false);
}
return myXhr;
},
success: function (res) {
parent.hidemodal()
if (res.error != null && res.error != '') {
parent.layer.open({
title: '错误信息',
icon: 2,
content: res.error,
btn: ['确认'],
closeBtn: 0
})
} else {
parent.layer.alert("上传成功,请核实上传数据是否正确(程序只会解析Excel中的第一个sheet文件内容)")
location.reload()
}
document.getElementById("fileBtn").value = "";
},
error: function (res) {
parent.hidemodal()
if (res.error != null && res.error != '') {
parent.layer.msg(res.error, {
icon: 2,
time: 2000
})
} else {
if (res != null && res != '' && (JSON.stringify(res) != "{}")) {
parent.layer.msg(res, {
icon: 2,
time: 2000
})
}
}
document.getElementById("fileBtn").value = "";
}
});
}
</script>
<body style=" <form class="layui-form" action="#" lay-filter="example"> <div class="container-fluid" style="padding: 0px;padding-bottom: 30px"> <div class="layui-row" style="margin: 0px"> <div class="layui-card"> <div class="layui-card-header" style="height: 45px"> <img class="header-img" th:src="@{/images/result.png}"> <div class="header-title-div"> <span class="header-title-name" id="title">查看</span> </div> </div> <div class="layui-card-body" style="padding: 7px 14px;"> <div class="search-div"> <div style="display:flex;"> <span>查询条件：</span> <div class="sleect-div" style="margin: 7px 15px"> <select name="skillid" id="skillid"> <option value="">所有项目</option> <option th:each="skill,i : ${skilllist}" th:value="${skill.id}" th:text="${skill.skillname}"></option> </select> </div> <div class="select-div" style="margin: 7px 15px"> <input type="text" class="form-control" id="devicename" placeholder="设备名称"> </div> <button type="button" style=" height: 43px;margin-right: 20px; font-family: MicrosoftYaHei-Bold; font-weight: bold; color: rgba(255,255,255,1); line-height: 20px; background: linear-gradient(90deg, #49B8FF 0%, #2948FF 100%);" id="search" class="btn btn-default"> <span class="layui-icon layui-icon-search" style="font-size: 15px;"></span>查询</button> <div class="adduser-div" id="uploadsummary" onclick='fileBtnClick(this)'> <div class="upload-icon" style="margin-right: 2px;"> </div> <div class="adduser-title">上传汇总表</div> </div> <div shiro:hasAllPermissions="expert_excel"> <div class="adduser-div" onclick="downdemand()"> <span class="layui-icon layui-icon-download-circle" style="color:rgba(20, 119, 230, 1);margin-left: 11px;margin-right: -8px"> </span> <div style="display: inline-block" class="adduser-title">导出汇总表</div> </div> </div> </div> </div> <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;"> <button type="button" data-method="offset" data-type="auto" class="layui-btn layui-btn-normal">增加</button> </div> <table class="layui-hide" id="tab" lay-filter="tab"></table> </div> </div> </div> <div></div> </div> <script type="text/html" id="barDemo"> <!--<a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>--> <button type="button" class="layui-btn layui-btn-sm" lay-event="edit" id="edit">编辑</button> <!--<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>--> </script> <style> .layui-layer-page .layui-layer-content { position: relative; overflow: visible; } </style> </form> <input type="file" id="fileBtn" style="display:none" onchange="fileClick()"> <script th:src="@{/layuiadmin/layui/layui.js}"></script> <script> layui.use(['table','layer','form'], function(){ var layer=layui.layer, table = layui.table, $ = layui.jquery; //点击增加按钮，在替换当前页面 $('#layerDemo .layui-btn').on('click', function(){ parent.$("#ifm").attr('src','/tempDemandmeterSave'); }); //监听行工具事件 table.on('tool(tab)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值" var data = obj.data //获得当前行数据 ,layEvent = obj.event; //获得 lay-event 对应的值 if(layEvent === 'edit'){ // 修改：跳转到后台 location.href="/tempDemandmeterUpdate?id="+data.id } }); table.render({ elem: '#tab' , url: '/tempDemandmeter/tempDemandmeterdataLike' , method: 'post' , request: { pageName: 'page' //页码的参数名称，默认：page ,limitName: 'limit' //每页数据量的参数名，默认：limit } , parseData: function (res) { //res 即为原始返回的数据 return { "code": res.code, //解析接口状态 "count": res.count, //解析数据长度 "data": res.data //解析数据列表 }; } , where: { devicename:$("#devicename").val(), skillid:$("#skillid").val() } ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 ,groups: 10 //只显示 1 个连续页码 ,first: true //显示首页 ,last: true //显示尾页 ,prev:"上一页" ,next:"下一页", first:"首页", last:"末页", count:"11", }, title:'汇总表', limit: 10, skin: "nob",//表格无边框 even: true, cols: [ [ // {field:"id",width:"0px",align:'center',style:'display:none;'}, {title:"序号",align:'center',type:'numbers'}, {field:"skillname",title:"项目",align:'center',templet:function(row){ if(row.skillname == null || row.skillname== ''){ return '<span style="color: red">未关联项目</span>' }else{ return row.skillname; } }}, // { type: "numbers", title: "技术支持单位", rowspan: 2, align: "center" }, {field:"devicename",title:"设备名称",width:100,align:'center'}, {field:"power",title:"设备功率",sort : true,align:'center'}, {field:"peak",title:"设备用电峰值",sort : true,align:'center'}, {field:"count",title:"设备数量",sort : true,align:'center'}, {field:"mpa",title:"用气需求",sort : true,align:'center'}, {field:"exhaust",title:"排气需求",sort : true,align:'center'}, {field:"waterway",title:"用水方式",sort : true,align:'center'}, {field:"drainageway",title:"排水方式",sort : true,align:'center'}, {field:'right', title: '操作', toolbar:"#barDemo" ,align:'center'} ] ] }); $("#search").on('click',function(){ table.reload('tab',{ where : { devicename:$("#devicename").val(), skillid:$("#skillid").val() } }); }) }); function downdemand() { $.ajax({ url:'/tempDemandmeter/tempDemandmeterdataLikenotab', method:'post', data:{ devicename:$("#devicename").val(), skillid:$("#skillid").val() }, dataType:'json', success:function (res) { layui.use('table',function () { layui.table.exportFile('tab', res.data, 'xls'); }) } }) } </script> </body> </html>
增加的html页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>添加信息</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" th:href="@{/layuiadmin/layui/css/layui.css}">
<script type="text/javascript" th:src="@{/js/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/layuiadmin/layui/layui.js}"></script>
</head>
<body>
<!--进行添加的操作-->
<div class="layui-row" id="add" >
<div class="layui-col-md10">
<form class="layui-form layui-from-pane" action="" style="margin-top:20px" method="">
<div class="layui-form-item">
<label class="layui-form-label">项目名称</label>
<div class="layui-input-block">
<select name="skillid" id="skillid1">
<option th:each="skill,i : ${skilllist}" th:value="${skill.id}" th:text="${skill.skillname}"></option>
</select>
</div>
</div>
<div class="layui-form-item"><label class="layui-form-label">设备名称</label>
<div class="layui-input-block"><input type="text" name="devicename"
autocomplete="off" placeholder="请输入设备名称" class="layui-input">
</div>
</div>
<div class="layui-form-item"><label class="layui-form-label">设备功率</label>
<div class="layui-input-block"><input type="text" name="power"
autocomplete="off" placeholder="请输入设备功率" class="layui-input">
</div>
</div>
<div class="layui-form-item"><label class="layui-form-label" >设备用峰值</label>
<div class="layui-input-block"><input type="text" name="peak"
autocomplete="off" placeholder="请输入设备用电峰值" class="layui-input">
</div>
</div>
<div class="layui-form-item"><label class="layui-form-label">设备数量</label>
<div class="layui-input-block"><input type="text" name="count"
autocomplete="off" placeholder="请输入设备数量" class="layui-input">
</div>
</div>
<div class="layui-form-item"><label class="layui-form-label">用气需求</label>
<div class="layui-input-block"><input type="text" name="mpa"
autocomplete="off" placeholder="请输入用气需求" class="layui-input">
</div>
</div>
<div class="layui-form-item"><label class="layui-form-label">排气需求</label>
<div class="layui-input-block"><input type="text" name="exhaust"
autocomplete="off" placeholder="请输入排气需求" class="layui-input">
</div>
</div>
<div class="layui-form-item"><label class="layui-form-label">用水方式</label>
<div class="layui-input-block"><input type="text" name="waterway"
autocomplete="off" placeholder="请输入用水方式" class="layui-input">
</div>
</div>
<div class="layui-form-item"><label class="layui-form-label">排水方式</label>
<div class="layui-input-block"><input type="text" name="drainageway"
autocomplete="off" placeholder="请输入排水方式" class="layui-input">
</div>
</div>
<div class="layui-form-item" >
<div class="layui-input-block">
<button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="submitadd">确认</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<button type="reset" class="layui-btn layui-btn-primary" onclick="javascript:history.back()">返回</button>
</div>
</div>
</form>
</div>
</div>
</body>
<script th:src="@{/layuiadmin/layui/layui.js}"></script>
<script>
layui.use(['table','layer','form'], function(){
var layer=layui.layer,
table = layui.table,
$ = layui.jquery;
layui.form.on('submit(submitadd)', function (data) {
$.ajax({
url: '/tempDemandmeter/tempDemandmetersave',
type: 'POST',
dataType: 'json',
data:data.field,
success: function (msg) {
var returnCode = msg.result;//取得返回数据（Sting类型的字符串）的信息进行取值判断
if (returnCode) {
layer.closeAll('loading');
layer.load(2);
layer.msg("添加成功");
setTimeout(function () {
// parent.$("#ifm").attr('src','/tempDemandmeter');
history.back();
// location.reload();//刷新页面
/* layer.closeAll();//关闭所有的弹出层*/
},
1000
);
//加载层-风格
} else {
layer.msg(msg.message);
}
}
})
// })
return false;
})
});
</script>
</html>
修改的hrml页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>修改信息</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" th:href="@{/layuiadmin/layui/css/layui.css}">
<script type="text/javascript" th:src="@{/js/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/layuiadmin/layui/layui.js}"></script>
</head>
<body>
<!--进行添加的操作-->
<div class="layui-row" id="add" >
<div class="layui-col-md10">
<form class="layui-form layui-from-pane" action="" style="margin-top:20px" th:object="${entity}">
<input type="hidden" name="id" th:value="*{id}">
<div class="layui-form-item">
<label class="layui-form-label">项目名称</label>
<div class="layui-input-block">
<select name="skillid" id="skillid" th:field="*{skillid}" >
<option th:each="skill,i : ${skilllist}" th:value="${skill.id}" th:text="${skill.skillname}"></option>
</select>
</div>
</div>
<div class="layui-form-item"><label class="layui-form-label">设备名称</label>
<div class="layui-input-block"><input type="text" name="devicename" th:value="*{devicename}"
autocomplete="off" placeholder="请输入设备名称" class="layui-input">
</div>
</div>
<div class="layui-form-item"><label class="layui-form-label">设备功率</label>
<div class="layui-input-block"><input type="text" name="power" th:value="*{power}" autocomplete="off" placeholder="请输入设备功率" class="layui-input"> </div> </div> <div class="layui-form-item"><label class="layui-form-label" >设备用峰值</label> <div class="layui-input-block"><input type="text" name="peak" th:value="*{peak}" autocomplete="off" placeholder="请输入设备用电峰值" class="layui-input"> </div> </div> <div class="layui-form-item"><label class="layui-form-label">设备数量</label> <div class="layui-input-block"><input type="text" name="count" th:value="*{count}" autocomplete="off" placeholder="请输入设备数量" class="layui-input"> </div> </div> <div class="layui-form-item"><label class="layui-form-label">用气需求</label> <div class="layui-input-block"><input type="text" name="mpa" th:value="*{mpa}" autocomplete="off" placeholder="请输入用气需求" class="layui-input"> </div> </div> <div class="layui-form-item"><label class="layui-form-label">排气需求</label> <div class="layui-input-block"><input type="text" name="exhaust" th:value="*{exhaust}" autocomplete="off" placeholder="请输入排气需求" class="layui-input"> </div> </div> <div class="layui-form-item"><label class="layui-form-label">用水方式</label> <div class="layui-input-block"><input type="text" name="waterway" th:value="*{waterway}" autocomplete="off" placeholder="请输入用水方式" class="layui-input"> </div> </div> <div class="layui-form-item"><label class="layui-form-label">排水方式</label> <div class="layui-input-block"><input type="text" name="drainageway" th:value="*{drainageway}" autocomplete="off" placeholder="请输入排水方式" class="layui-input"> </div> </div> <div class="layui-form-item" > <div class="layui-input-block"> <button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="submitadd">确认</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> <button type="reset" class="layui-btn layui-btn-primary" onclick="javascript:history.back()">返回</button> </div> </div> </form> </div> </div> </body> <script th:src="@{/layuiadmin/layui/layui.js}"></script> <script> layui.use(['table','layer','form'], function(){ var layer=layui.layer, table = layui.table, $ = layui.jquery; layui.form.on('submit(submitadd)', function (data) { $.ajax({ url: '/tempDemandmeter/tempDemandmeteredit', type: 'POST', dataType: 'json', data:data.field, success: function (msg) { var returnCode = msg.result;//取得返回数据（Sting类型的字符串）的信息进行取值判断 if (returnCode) { layer.closeAll('loading'); layer.load(2); layer.msg("修改成功"); setTimeout(function () { // parent.$("#ifm").attr('src','/tempDemandmeter'); history.back(); // location.reload();//刷新页面 /* layer.closeAll();//关闭所有的弹出层*/ }, 1000 ); //加载层-风格 } else { layer.msg(msg.message); } } }) // }) return false; }) }); </script> </html>
主要注意的：
单选按钮：通过后台闯过来的值在页面中被选中进行显示
<div class="layui-input-block">
<input type="radio" name="sex" th:checked="${entity.sex == 1}" value="1" title="男" >
<input type="radio" name="sex" th:checked="${entity.sex == 2}" value="2" title="女">
</div>
