tab标签页切换iframe
简介：li中的for是渲染给界面input中value值，form表单提交，在给layui中的渲染数据连接和where中的条件在后端查询数据
1.父类界面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
Document
<script src="/kms/layui/layui/layui.js"></script>
class="w">
class="search">
class="search-input">
<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>
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" %>
科技项目-申报管理
class="table">
class="shaixuan">
class="table-bottom">
class="table-bottom-top">
class="table-bottom-left">
class="table-bottom-right">
<%--if test="${hasApplyPermit&&isopen}">--%>
<%----%>
<%-- if>--%>
<%--if test="${permit}">--%>
<%----%>
<%----%>
<%----%>
<%-- if>--%>
<%----%>
<%----%>
class="table-bottom-table">
class="projectnewlist">
<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>
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); ListrecordList = page.getRecordList(); jo.put("code", 0); jo.put("msg", ""); jo.put("count", page.getRecordCount()); jo.put("data", recordList); writer.print(jo.toString()); } }