jsp iframe example
1. jsp中用iframe的方式在body中展示列表， 可以通过父元素的宽、高来设定iframe的宽高。
<div class="wrapper" style="height:100%">
<iframe src="${pageContext.request.contextPath }/finished_workorder.action" scrolling="no" name="mainFrame" frameborder="0" marginheight="0" marginwidth="0" height="100%" width="100%"></iframe>
</div>
2. (struts2)action处理完，返回一个jsp视图页面。
struts.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <constant name="struts.devMode" value="true" /> <package name="default" namespace="" extends="struts-default"> <default-action-ref name="default" /> <action name="default" class="com.cdv.apolloagent.action.HomeAction" method="execute"> <result name="success">/WEB-INF/jsp/index.jsp</result> </action> <action name="finished_workorder" class="com.cdv.apolloagent.action.WorkOrderAction" method="finished_workorder"> <param name="pageNo">${pageNo}</param> <result name="success">/WEB-INF/jsp/finished_workorder.jsp</result> </action> </package> </struts>
WorkOrderAction.java
public String finished_workorder(){//@RequestParam(required=false) Integer pageNo HttpServletRequest request = ServletActionContext.getRequest(); String pNo = request.getParameter("pageNo"); Integer pageNo = 1; if(pNo!=null) pageNo = Integer.parseInt(pNo); PageParameter page = new PageParameter(); if(pageNo!=null && pageNo>1){ page.setPageNo(pageNo); } List<Workorderlog> finishedWorkorderlogList = workorderlogService.selectFinishedWorkorderListPage(page); int totalCount = workorderlogService.countFinishedWorkorder(); page.setTotalCount(totalCount); page.setTotalPage(totalCount%page.getPageSize()==0 ? totalCount/page.getPageSize() : totalCount/page.getPageSize()+1); request.setAttribute("finishedWorkorderlogList", finishedWorkorderlogList); request.setAttribute("page", page); return "success"; }
finished_workorder.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <%@taglib prefix="s" uri="/struts-tags" %> <!DOCTYPE html> <!--[if lt IE 7]> <html class="ie ie6 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="ie ie7 lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="ie ie8 lt-ie9" lang="en"> <![endif]--> <!--[if IE 9]> <html class="ie ie9" lang="en"> <![endif]--> <!--[if !IE]><!--> <html lang="en" class="no-ie"> <!--<![endif]--> <head> <!-- Meta--> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <title>已完成工单</title> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]--> <!-- Bootstrap CSS--> <link rel="stylesheet" href="<%=path %>/app/css/bootstrap.css"> <!-- Vendor CSS--> <link rel="stylesheet" href="<%=path %>/vendor/fontawesome/css/font-awesome.min.css"> <link rel="stylesheet" href="<%=path %>/vendor/animo/animate+animo.css"> <!-- <link rel="stylesheet" href="<%=path %>/vendor/csspinner/csspinner.min.css"> --> <link rel="stylesheet" href="<%=path %>/vendor/datetimepicker/css/bootstrap-datetimepicker.min.css"> <!-- START Page Custom CSS--> <!-- Data Table styles--> <link rel="stylesheet" href="<%=path %>/vendor/datatable/extensions/datatable-bootstrap/css/dataTables.bootstrap.css"> <link rel="stylesheet" href="<%=path %>/vendor/datatable/extensions/ColVis/css/dataTables.colVis.css"> <!-- END Page Custom CSS--> <!-- App CSS--> <link rel="stylesheet" href="<%=path %>/app/css/app.css"> <link rel="stylesheet" href="<%=path %>/app/css/beadmin-theme-c2.css"> <link rel="stylesheet" href="<%=path %>/static/ztree/zTreeStyle.css" type="text/css"> <link rel="stylesheet" href="<%=path %>/vendor/my/jqpagination.css"/> <link rel="stylesheet" href="<%=path %>/vendor/my/demo.css"/> <!-- Modernizr JS Script--> <script src="<%=path %>/vendor/modernizr/modernizr.js" type="application/javascript"></script> <!-- FastClick for mobiles--> <script src="<%=path %>/vendor/fastclick/fastclick.js" type="application/javascript"></script> </head> <body> <!-- START Main wrapper--> <div class="wrapper"> <!-- End aside--> <!-- START Main section--> <section> <!-- START Page content--> <div class="content-wrapper"> <h3>工单列表 <!-- <div style="float:right; margin-top:5px;" class="form-group"> <button type="button" onclick="$('#myModal').modal({backdrop: 'static', keyboard: false});;" class="btn btn-labeled btn-info"> <span class="btn-label"><i class="fa fa-plus"></i> </span>导入EPG</button> </div> --> <small>已完成工单表</small> </h3> <!-- START panel--> <!-- START DATATABLE 3--> <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading" style="border-bottom:1px solid #eee;"> <!-- <form class="form-inline"> <div class="form-group"> <b>时间: </b> <div class="datetimepicker input-group date mb-lg" data-pick-time="false"> <input type="text" class="form-control"> <span class="input-group-addon"> <span class="fa-calendar fa"></span> </span> </div> <span style="margin-top:-8px;">—</span> <div class="datetimepicker input-group date mb-lg" data-pick-time="false"> <input type="text" class="form-control"> <span class="input-group-addon"> <span class="fa-calendar fa"></span> </span> </div> </div> <div class="form-group"> <b>名称: </b> <input type="text" class="form-control mb-lg"> </div> <div class="form-group"> <b>频道: </b> <select class="form-control mb-lg" name="account"> <option>全部</option> <option>CCTV</option> <option>CCTV经济</option> <option>CCTV体育</option> </select> </div> <div class="form-group"> <b>节目源: </b> <select class="form-control mb-lg" name="account"> <option>全部</option> <option>CCTV</option> <option>CCTV经济</option> <option>CCTV体育</option> </select> </div> <div class="form-group"> <a style="margin:-10px 0 0 5px; float:left;" href="#" class="mb-sm btn btn-primary" type="button">搜索</a> </div> </form> --> </div> <div class="table-responsive"> <table class="table table-bordered table-hover dataTable no-footer" id="table-ext-1" > <thead> <tr> <th>工单ID</th> <th class="sorting" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 286px;" aria-label="Rendering engine: activate to sort column ascending">Correlate ID</th> <th class="sorting" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 86px;" aria-label="Rendering engine: activate to sort column ascending">创建时间</th> <th class="sorting" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 86px;" aria-label="Rendering engine: activate to sort column ascending">发布时间</th> <th class="sorting" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 86px;" aria-label="Rendering engine: activate to sort column ascending">错误信息</th> <th class="sorting" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 86px;" aria-label="Rendering engine: activate to sort column ascending">结果文件URL</th> <th class="sorting" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 86px;" aria-label="Rendering engine: activate to sort column ascending">错误码</th> <th>回调状态</th> <th class="th200">工单文档</th> <%-- <th class="check-all th80"> <div class="checkbox c-checkbox" data-title="Check All" data-toggle="tooltip" data-original-title="" title=""> <label> <input type="checkbox"> <span class="fa fa-check"></span> </label> </div> </th> --%> </tr> </thead> <tbody> <s:iterator value="#attr.finishedWorkorderlogList" id="finishedWorkorderlog"> <tr class="gradeX"> <td><s:property value="workorderid"/></td> <td><s:property value="correlateid"/></td> <td><s:property value="createtime"/></td> <td><s:property value="publictime"/></td> <td><s:property value="errorinfo"/></td> <td><s:property value="resultFileURL"/></td> <td><s:property value="errorcode"/></td> <td><s:property value="feedbackflag"/></td> <td class="detail" workorderid='<s:property value="workorderid"/>' ><a style="margin:-10px 0 0 5px; float:left;" href="#" class="mb-sm btn btn-primary" type="button">查看detail</a></td> <%-- <td><div class="checkbox c-checkbox"> <label> <input type="checkbox"> <span class="fa fa-check"></span> </label> </div></td> --%> </tr> </s:iterator> </tbody> <tfoot> <tr> </tr> </tfoot> </table> </div> <div class="panel-footer"> <div class="row"> <div id="my_pagination" class="gigantic pagination"> <a href="#" class="first" data-action="first">«</a> <a href="#" class="previous" data-action="previous">‹</a> <input type="text" readonly="readonly" data-max-page="40" /> <a href="#" class="next" data-action="next">›</a> <a href="#" class="last" data-action="last">»</a> </div> </div> </div> </div> </div> </div> <!-- END DATATABLE 3--> </div> <!-- END Page content--> </section> <!-- END Main section--> </div> <!-- END Main wrapper--> <div id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal" style="top:100px"> <div class="modal-dialog" style="width:600px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button> <h4 id="myModalLabel" class="modal-title">工单文档内容</h4> </div> <div class="modal-body" id="workorder_detail"> </div> <div class="modal-footer"> <button id="myModal3_close" type="button" data-dismiss="modal" class="btn btn-default">关闭</button> <button id="myModal3_sure" type="button" class="btn btn-primary">确定</button> </div> </div> </div> </div> <form method="post" id="pageForm" name="pageForm" action="<%=path%>/finished_workorder.action"> <input input="hidden" id="pageNo" name="pageNo" value="${page.pageNo }" /> </form> <!-- END modal--> <!-- START Scripts--> <!-- Main vendor Scripts--> <script src="<%=path %>/vendor/jquery/jquery.min.js"></script> <script src="<%=path %>/vendor/bootstrap/js/bootstrap.min.js"></script> <!-- Plugins--> <script src="<%=path %>/vendor/chosen/chosen.jquery.min.js"></script> <script src="<%=path %>/vendor/slider/js/bootstrap-slider.js"></script> <script src="<%=path %>/vendor/filestyle/bootstrap-filestyle.min.js"></script> <!-- Animo--> <script src="<%=path %>/vendor/animo/animo.min.js"></script> <!-- Sparklines--> <script src="<%=path %>/vendor/sparklines/jquery.sparkline.min.js"></script> <!-- MomentJs and Datepicker--> <script src="<%=path %>/vendor/moment/min/moment-with-langs.min.js"></script> <script src="<%=path %>/vendor/datetimepicker/js/bootstrap-datetimepicker.min.js"></script> <!-- Slimscroll--> <script src="<%=path %>/vendor/slimscroll/jquery.slimscroll.min.js"></script> <!-- Store + JSON--> <script src="<%=path %>/vendor/store/store+json2.min.js"></script> <!-- ScreenFull--> <script src="<%=path %>/vendor/screenfull/screenfull.min.js"></script> <!-- START Page Custom Script--> <!-- Data Table Scripts--> <script src="<%=path %>/vendor/datatable/media/js/jquery.dataTables.min.js"></script> <script src="<%=path %>/vendor/datatable/extensions/datatable-bootstrap/js/dataTables.bootstrap.js"></script> <script src="<%=path %>/vendor/datatable/extensions/datatable-bootstrap/js/dataTables.bootstrapPagination.js"></script> <script src="<%=path %>/vendor/datatable/extensions/ColVis/js/dataTables.colVis.min.js"></script> <!-- START Page Custom Script--> <script src="<%=path %>/vendor/wizard/js/bwizard.min.js"></script> <!-- Form Validation--> <script src="<%=path %>/vendor/parsley/parsley.min.js"></script> <!-- END Page Custom Script--> <!-- App Main--> <script src="<%=path %>/app/js/app.js"></script> <script src="<%=path %>/vendor/my/jquery.jqpagination.min.js"></script> <script> var path = '<%=path %>'; var pageNo = ${page.pageNo}; var totalPage = ${page.totalPage}; $('.pagination').jqPagination({ link_string : path+'/finished_workorder.action?pageNo={page_number}', current_page: pageNo, //设置当前页 默认为1 max_page : totalPage, //设置最大页 默认为1 page_string : '当前第{current_page}页,共{max_page}页', paged : function(page) { console.log(page); $("#pageNo").val(page); $("#pageForm").submit(); } }); $('.detail').each(function(){ var $detail = $(this); var a = $detail.children("a")[0]; var workorderid = $detail.attr("workorderid"); $(a).click(function(){ $.ajax({ url : "", type : "POST", data : { "workorderid" : workorderid }, success : function(wkdetail){ $("#workorder_detail").text(wkdetail); $("#myModal3").modal('show'); } }); }); $("#myModal3_close").click(function(){ $("#myModal3").modal('hide'); $("#workorder_detail").html(''); }); $("#myModal3_sure").click(function(){ $("#myModal3").modal('hide'); $("#workorder_detail").html(''); }); }); </script> <!-- $('.detail').each(function(){ var $detail = $(this); var wk_string = $detail.attr("wkdetail"); var sub_string = wk_string.substring(0,30); var a = $detail.children("a")[0]; $(a).text(sub_string); $(a).click(function(){ $("#workorder_detail").text(wk_string); $("#myModal3").modal('show'); }); $("#myModal3_close").click(function(){ $("#myModal3").modal('hide'); $("#workorder_detail").html(''); }); }) --> <!-- END Scripts--> </body> </html>
