公司使用的是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>
