实例：共7个小模块，每个小模块的除了名字不同外，均包括输入输出种参数，（输入输出参数名也大致相同）
该7个模块采用统一jsp，输入输出也采用统一页面
显示列表：
<%--
Created by IntelliJ IDEA.
User: Jacinta
Date: 2018/1/17
Time: 17:10
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>气体输入输出</title>
<meta name="decorator" content="default"/>
<style>
此部分隐藏
</style>
</head>
<body>
<ul class="nav nav-tabs">
<li class="" id="dataIn" ><a>输入参数</a></li>
<li class="" id="dataOut" ><a>输出参数</a></li>
</ul>
<sys:message content="${message}"/>
<%--类型的值 隐藏--%>
<input style="border-radius:10px;display: none" type="text" id="airType"/>
<input style="border-radius:10px; display: none" type="text" id="IOType" />
<table id="contentTable" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>序号</th>
<th>参数中文名称</th>
<th>参数英文名称</th>
<th>单位</th>
<th>默认值</th>
<th>最大值</th>
<th>最小值</th>
<th>参数解释</th>
<%--输出参数时显示-%> <c:if test="${gasdicPara.paraType==2}"> <th>是否专供<br/>技术人员使用</th> </c:if> <c:if test="${gasdicPara.paraType==1}"> <th>状态</th> </c:if> <th>操作</th> </tr> </thead> <tbody> <c:forEach items="${page.list}" var="gasdicPara" step="1" varStatus="status"> <tr> <td>${status.index+1}</td> <td>${gasdicPara.paraName}</td> <td>${gasdicPara.paraNameE}</td> <td>${gasdicPara.paraUnit}</td> <td>${gasdicPara.paraDefault}</td> <td>${gasdicPara.paraMax}</td> <td>${gasdicPara.paraMin}</td> <td>${gasdicPara.dicExplain}</td> <c:if test="${gasdicPara.paraType==2}"> <td> <c:if test="${gasdicPara.isEngineer == 0}">否</c:if> <c:if test="${gasdicPara.isEngineer == 1}">是</c:if> </td> </c:if> <c:if test="${gasdicPara.paraType==1}"> <td> <c:if test="${gasdicPara.status == 0}">无效</c:if> <c:if test="${gasdicPara.status == 1}">有效</c:if> </td> </c:if> <td> <a href="javascript:void(0)" onclick="edit(${gasdicPara.id})"> <i style="color:green"class=" icon-file-alt"></i></a> </td> </tr> </c:forEach> </tbody></table><div class="pagination">${page}</div><script> 重点代码 $(function() { var airType=getQueryValue('airType',window.location.href); var IOType=getQueryValue('IOType',window.location.href ); var inUrl='${ctx}/biz/gasIO/gasIOPara?airType='+ airType + '&IOType=1'; var outUrl='${ctx}/biz/gasIO/gasIOPara?airType='+ airType + '&IOType=2' $("#airType").val(airType); $("#IOType").val(IOType); if(IOType==="1")$("#dataIn").addClass("active"); else $("#dataOut").addClass("active"); $("#dataIn").find("a").attr("href",inUrl); $("#dataOut").find("a").attr("href",outUrl); }); //获取url中参数的值 var getQueryValue= function(key, href) { var reg = new RegExp('[?&]' + key + '=([^&]*)', 'g'); var match = (href || window.location.search).match(reg); if (!match) return; if (match.length === 1) return decodeURIComponent(match[0].replace(reg, '$1')); match = match.map(function(item) { return decodeURIComponent(item.replace(reg, '$1')); }); return match; };function deleteOrNot(paraId) { layer.confirm('确定删除？', { btn: ['确定','取消'] //按钮 }, function(){ layer.close(); $.ajax({ type: "post", url: "${ctx}/biz/gasIO/delete", data: 'paraId='+paraId, dataType:"text", success: function (Info) { if (Info == "success") { layer.msg('删除成功！',{time:2000});//保存成功提示 window.location.reload(); //刷新父页面 }else{ layer.msg('异常！',{time:2000}); } } }); }, function(){ layer.close(); }); }</script></body></html>
编辑页面:
function deleteOrNot(paraId) { layer.confirm('确定删除？', { btn: ['确定','取消'] //按钮 }, function(){ layer.close(); $.ajax({ type: "post", url: "${ctx}/biz/gasIO/delete", data: 'paraId='+paraId, dataType:"text", success: function (Info) { if (Info == "success") { layer.msg('删除成功！',{time:2000});//保存成功提示 window.location.reload(); //刷新父页面 }else{ layer.msg('异常！',{time:2000}); } } }); }, function(){ layer.close(); }); }
<%-- Created by IntelliJ IDEA. User: Jacinta Date: 2018/1/17 Time: 17:10 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> <html> <head> <title>温室气体</title> <meta name="decorator" content="default"/> </head> <body> <div style="margin-left: 20px;margin-top: 20px;" > <form:form id="gasIOParaForm" modelAttribute=" " method="post" > <input name="id" value="${gasdicPara.id}" style="display: none"/> <input name="paraType" value="${gasdicPara.paraType}" style="display: none"> <input name="paraAirType" value="${gasdicPara.paraAirType}" style="display: none"> <sys:message content="${message}"/> <c:if test="${not empty gasdicPara.paraId}"> <div class="controls"> <label class="control-label"><span style="color:red;">*</span>状 态:</label> <select id="status" name="status"> <c:if test="${not empty gasdicPara.paraId}"> <c:if test="${gasdicPara.status == 0}"> <option value="0" selected>不启用</option> <option value="1">启用</option> </c:if> <c:if test="${gasdicPara.status == 1}"> <option value="0" >不启用</option> <option value="1" selected>启用</option> </c:if> </c:if> <c:if test="${ empty gasdicPara.paraId}"> <option value="0">不启用</option> <option value="1" selected>启用</option> </c:if> </select> </div> <div align="center" style="margin-top: 20px"> <input id="btnSubmit" class="btn btn-primary" type="button" value="保 存" onclick="save()"/> <input id="btnCancel" class="btn" type="button" value="返 回" onclick="back()"/> </div> </form:form> </div> </body> </html>
function deleteOrNot(paraId) { layer.confirm('确定删除？', { btn: ['确定','取消'] //按钮 }, function(){ layer.close(); $.ajax({ type: "post", url: "${ctx}/biz/gasIO/delete", data: 'paraId='+paraId, dataType:"text", success: function (Info) { if (Info == "success") { layer.msg('删除成功！',{time:2000});//保存成功提示 window.location.reload(); //刷新父页面 }else{ layer.msg('异常！',{time:2000}); } } }); }, function(){ layer.close(); }); }