tab标签页切换iframe
简介：li中的for是渲染给界面input中value值，form表单提交，在给layui中的渲染数据连接和where中的条件在后端查询数据
1.父类界面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/kms/technologyProject/css/base.css">
<link rel="stylesheet" href="/kms/technologyProject/css/list.css">
<link rel="stylesheet" href="/kms/technologyProject/css/toubu.css">
<link rel="stylesheet" href="/kms/layui/layui/css/layui.css">
<script src="/kms/layui/layui/layui.js"></script>
</head>
<body>
<div class="w">
<div class="search">
<div class="search-input">
<form class="sear-post" id="SearchForm" name="VelcroForm"
action="/ServiceAction/com.velcro.workflow.report.servlet.ReportAction?action=search&reportid=2c923dae67313bc70167396dc8d1497b"
name="searchForm" method="post">
<input type="text" name="topicname" id="keyword" placeholder="请输入你想查询的项目名称">
<button class="btn-search" onclick="search_result()">搜索</button>
</form>
</div>
</div>
<div class="list">
<div class="list-left">
<div class="list-title">分类导航</div>
<ul>
<li for="/kms/instrumentUnitAction/view.do" class="anxia">
<a href="#" >
<i><img src="/kms/technologyProject/image/list-books.png" alt=""></i>
设备台账
</a>
</li>
<li for="/kms/weekInstrument/view.do">
<a href="#">
<i><img src="/kms/technologyProject/image/list-books.png" alt=""></i>
周检计划
</a>
</li>
<li for="/kms/lowerInstrument/view.do">
<a href="#">
<i><img src="/kms/technologyProject/image/list-books.png" alt=""></i>
降级报废登记
</a>
</li>
</ul>
</div>
<div class="list-right">
<iframe src="/kms/instrumentUnitAction/view.do" width="1000" height="990" frameborder="0" scrolling="no" style="border-radius: 4px 4px 4px 4px;border-radius: 4px 4px 4px 4px;-moz-border-radius: 4px 4px 4px 4px;-webkit-border-radius: 4px 4px 4px 4px;"></iframe>
</div>
</div>
</div>
<script src="/kms/js/jquery-1.12.4.min.js"></script>
<script>
// 右侧
$(function () {
$(".list-left>ul>li").click(function () {
$(this).addClass("anxia").siblings().removeClass("anxia")
var html = $(this)[0].attributes.for.value
$("iframe")[0].attributes.src.value = html
})
})
function search_result() {
var kw = $("#keyword").val();
if (kw == "" || kw == "请输入你想查询的项目名称") {
alert("请输入你想查询的项目名称!");
return;// 请输入搜索内容
}
$('#SearchForm').submit();
}
</script>
</body>
</html>
2.子界面，iframe中的界面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>科技项目-申报管理</title>
<link rel="stylesheet" href="/kms/technologyProject/css/base.css">
<link rel="stylesheet" href="/kms/layui/layui/css/layui.css">
<link rel="stylesheet" href="/kms/technologyProject/css/list.css">
</head>
<style>
html,body{
background-color: #fff;
}
</style>
<body>
<div class="table">
<div class="shaixuan">
<label for="">筛选条件</label>
<button>收起筛选</button>
</div>
<form class="layui-form" id="VelcroForm" name="VelcroForm" action="/kms/instrumentUnitAction/view.do" method="post">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">仪器名称</label>
<div class="layui-input-inline">
<input type="text" id="objname" name="objname" value="${equipment.objname}" placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">规格型号</label>
<div class="layui-input-inline">
<input type="text" id="specification" name="specification" placeholder="" value="${equipment.specification}" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">测量范围</label>
<div class="layui-input-inline">
<input type="text" id="extent" name="extent" placeholder="" value="${equipment.extent}" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">精度</label>
<div class="layui-input-inline">
<input type="text" id="precision" name="precision" value="${equipment.precision}" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">生产厂家</label>
<div class="layui-input-inline">
<input type="text" id="manufacturer" name="manufacturer" placeholder="" value="${equipment.manufacturer}" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">校验检定周期</label>
<div class="layui-input-inline">
<input type="text" id="period" name="period" placeholder="" value="${equipment.period}" class="layui-input">
</div>
</div>
</div>
<%--<div class="layui-form-item">--%>
<%--<div class="layui-input-block detail-search-btn">--%>
<%--<button class="layui-btn bg-blue" lay-submit lay-filter="formData">搜索</button>--%>
<%--<button type="reset" class="layui-btn layui-btn-primary color-blue border-blue">清除条件</button>--%>
<%--</div>--%>
<%--</div>--%>
</form>
<div class="table-bottom">
<div class="table-bottom-top">
<div class="table-bottom-left"></div>
<div class="table-bottom-right">
<%--<c:if test="${hasApplyPermit&&isopen}">--%>
<%--<button type="button" onclick="window.open('/ServiceAction/com.velcro.workflow.workflow.servlet.WfViewAction?pipeid=2c923dae67313bc70167392d49b36579&targeturl=')">申报项目</button>--%>
<%--</c:if>--%>
<%--<c:if test="${permit}">--%>
<%--<button href="javascript:void(0);" type="button" onclick="javascript:getExpertBrowser('creatorId','creatorspan','2c923dae6753cabe01675485406d030c','','','0');">分配专家</button>--%>
<%--<button href="javascript:void(0);" onclick="deleteProject()" type="button" class="delete">删除项目</button>--%>
<%--<button href="javascript:void(0);" onclick="submitOpinion()" type="button">批量提交意见</button>--%>
<%--</c:if>--%>
<%--<button href="javascript:void(0);" onclick="exportExcel()" type="button" class="export">导出列表</button>--%>
<%--<button href="javascript:void(0);" onclick="exportLXZip()" type="button" class="exportZip">导出压缩包</button>--%>
<button lay-submit lay-filter="formData" onclick="javascript:search();">搜索</button>
<button href="javascript:void(0);" type="button" class="clear">清除条件</button>
</div>
</div>
<div class="table-bottom-table">
<div id="projectLX" class="projectnewlist">
<table id="equipmentTable" lay-filter="test"></table>
</div>
</div>
</div>
</div>
<script src="/kms/js/jquery-1.12.4.min.js"></script>
<script src="/kms/layui/layui/layui.js"></script>
<script src="/kms/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/vjs/browser.js"></script>
<script src="/kms/technologyProject/static/list.js"></script>
<script src="/kms/technologyProject/static/equipment-handle.js"></script>
<script src="/kms/technologyProject/static/device-handle.js"></script>
</body>
</html>
3.equipment-handle.js
$(function() { layui.use(['table', 'element', 'form', 'layer'], function(){ var form = layui.form ,layer = layui.layer ,table = layui.table ,laydate = layui.laydate; table.render({ elem: '#equipmentTable' ,height: 692 ,url: '/kms/instrumentUnitAction/data.do' //数据接口 ,page: true //开启分页 ,limits: [5, 10, 15] ,limit: 15 //每页默认显示的数量 ,request: { pageName: 'currentPage' //页码的参数名称，默认：page ,limitName: 'pageSize' //每页数据量的参数名，默认：limit } , where: { objname: $("#objname").val(), specification: $("#specification").val(), extent: $("#extent").val(), precision: $("#precision").val(), manufacturer: $("#manufacturer").val(), period: $("#period").val() } ,parseData: function(res){ //res 即为原始返回的数据 return { "code": res.code, //解析接口状态 "msg": res.msg, //解析提示文本 "count": res.count, //解析数据长度 "data": res.data //解析数据列表 }; } ,cols: [[ //表头 {checkbox: true,fixed: 'left'} ,{field: 'objname', title: '仪器名称', width:250, sort: true, fixed: 'left', event:'setHref'} ,{field: 'specification', title: '规格型号',sort: true, width:110} ,{field: 'extent', title: '测量范围', width:100} ,{field: 'precision', title: '精度', width:100} ,{field: 'manufacturer', title: '生产厂家', width:110, sort: true} ,{field: 'objno', title: '设备编号', width:110, sort: true} ,{field: 'period', title: '校验检定周期', width:150, sort: true} ,{field: 'lestinspectiondate', title: '下次检定、校准日期', width:200, sort: true} ,{field: 'creator', title: '创建人 ', width:100, sort: true} ,{field: 'creatordate', title: '创建日期', width:110} ]] }); //监听提交 /* form.on('submit(formData)', function(data){ var dataForm = data.field; //执行重载 table.reload('equipmentTable', { page: { curr: 1 //重新从第 1 页开始 } ,where: dataForm }); return false; });*/ }); })
4.InstrumentUnitAction控制层
package com.velcro.kms.technologyproject.action; import com.navi.utils.IPage; import com.navi.utils.StringUtils; import com.navi.web.WebUtils; import com.velcro.base.BaseContext; import com.velcro.kernel.base.selectitem.model.ISelectitem; import com.velcro.kms.technologyproject.model.TechnologyApprovalModel; import com.velcro.kms.technologyproject.model.TestingEquipment; import com.velcro.kms.technologyproject.service.EquipmentService; import net.sf.json.JSONObject; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.ModelAndView; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; import java.util.List; /** * 设备台账 */ @Controller public class InstrumentUnitAction { @Autowired private EquipmentService equipmentService; @RequestMapping("/kms/instrumentUnitAction/view") public ModelAndView view(HttpServletRequest request) { ModelAndView mav = new ModelAndView("kms/technologyProject/instrument-unit"); TestingEquipment equipment = com.velcro.km.util.WebUtils.requestToBean(request, TestingEquipment.class); mav.addObject("equipment",equipment); return mav; } /** * 查询设备台账分页列表 * @param request * @param response * @throws IOException */ @RequestMapping("/kms/instrumentUnitAction/data") public void data(HttpServletRequest request, HttpServletResponse response) throws IOException { JSONObject jo=new JSONObject(); PrintWriter writer = response.getWriter(); int currentPage= com.navi.utils.NumberUtils.objToInt(request.getParameter("currentPage"), 1); int pageSize= com.navi.utils.NumberUtils.objToInt(request.getParameter("pageSize"), 20); TestingEquipment equipment = com.velcro.km.util.WebUtils.requestToBean(request, TestingEquipment.class); IPage page = equipmentService.equipmentPage(equipment, currentPage, pageSize); List<TestingEquipment> recordList = page.getRecordList(); jo.put("code", 0); jo.put("msg", ""); jo.put("count", page.getRecordCount()); jo.put("data", recordList); writer.print(jo.toString()); } }
浙公网安备 33010602011771号