场景：当前页面有“查看信息”按钮，点击后在当前页面出现弹窗，弹窗里引入了描述合同信息的jsp(因为合同信息太长，不可能放在弹窗里，单独做了一个合同信息的jsp页面)，合同信息页面有部分数据需要在弹窗出现的时候动态查询填充进去。
js调用代码：
userManage.viewWinShow = function(i){
var data = userManage.grid.getData(i);
$("#clause2").load("http://localhost/test/viewContract.do?id="+data.id);
$('#viewWindow').modal({backdrop:"static",show:true });
$("#viewWindow").draggable({ handle: ".modal-header" });
}
当前页面弹窗jsp代码：
<div class="modal hide fade modal-m" id="viewWindow" data-show="false" style="width:880px;height:560px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>信息</h3>
</div>
<div class="modal-body">
<div class="row-block">
<div id="clause2" role="tabpanel" class="table-responsive tab-pane fade in active" style="overflow:hidden;">
//此处通过js调用引入合同contractView.jsp页面
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">关闭</a>
</div>
</div>
java代码：
@RequestMapping("/viewContract")
public ModelAndView contractInfo(Integer id) {
return new ModelAndView("contractView.jsp",contractBo.getInfoMap(id));
}
@Service
public class ContractBo {
public Map<String, Object> getInfoMap(Integer id){
//...查询省略
Map<String, Object> map = new HashMap<String, Object>();
map.put("authName", "张三");
map.put("contractNo", "NS001");
map.put("endTime", "2019-12-31");
map.put("addTime", "2019-05-01");
map.put("validDate", "2019-06-01至2019-12-31");
return map;
}
}
合同contractView.jsp页面：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{font-family:SimSun;}
@page{size:A1;margin:0;}
</style>
</head>
<body>
<div class="word-wrap">
<div style="text-align:right;padding:10px;font-size:14px;">协议编号：${contractNo}</div>
<h2 class="title">合作协议</h2>
<h3 class="sec-title">甲方：xxxxxx有限公司</h3>
<h3 class="sec-title">
乙方：${authName}
</h3>
<div class="cap-section">
<p class="sub-title">第一条 定义与解释</p>
/.....省略
</div>
<div class="cap-section">
<p class="sub-title">第二条 合作内容</p>
/.....省略
</div>
<div class="cap-section">
<p class="sub-title">第三条 双方权利和义务</p>
/.....省略
</div>
<div class="cap-section">
<p class="sub-title">第四条 知识产权与保密条款</p>
/.....省略
</div>
<div class="cap-section">
<p class="sub-title">第五条 结算</p>
/.....省略
</div>
<p class="shut-down">以下无正文</p>
<table style="float:right;font-size:14px;">
<tr>
<td style="text-align:right;">协议有效期：</td>
<td>${validDate}</td>
</tr>
<tr>
<td style="text-align:right;">协议签署日期：</td>
<td>${addTime}</td>
</tr>
</table>
</div>
</body>
</html>
分享到：
相关推荐
表单通常包含`<form>`标签，指定一个`action`属性指向处理表单数据的JSP页面（在这个案例中是第二个JSP页面）和一个`method`属性（通常设置为"POST"以传递敏感数据）。 3. **请求参数处理** 当用户提交表单时，...
在本文中，我们将探讨如何使用`layer...通过Struts2框架，我们可以方便地控制页面间的跳转和数据交换，而`layer`则提供了良好的弹层效果和交互体验。在实际开发中，这样的技术组合可以提高应用的用户体验和功能完整性。
Thymeleaf 提供了与 SpringMVC 的良好集成，可以用于创建动态 Web 页面。 Bootstrap 是一个流行且响应式的前端开发框架，用于快速构建美观且适应各种设备的网站。它包含 CSS 样式表、JavaScript 插件和 HTML5 符号...
前端JavaScript函数会解析这些数据，动态更新页面的Div元素或直接填充到指定元素中。用户可以通过键盘或鼠标选择记录，选中后，内容自动填充到主页面，同时关闭选择界面。 4. **Ajax实现细节** - **Jsp前台**：...
ASP（Active Server Pages）是一种微软开发的服务器端脚本环境，用于生成动态网页或Web应用程序。AJAX（Asynchronous JavaScript and XML）则是一种在无需重新加载整个网页的情况下更新部分网页内容的技术，它允许...
数据库脚本可能是用来初始化数据库结构和填充初始数据的SQL语句。 3. **.htaccess**：这是一个Apache服务器配置文件，用于实现URL重写、访问控制、错误页面定制等功能。在本系统中，`.htaccess`可能用于优化URL，...
JQuery和JavaScript库增强了页面的交互性和用户体验，它们用于处理表单验证、动态加载数据、弹窗提示等前端功能。JQuery简化了DOM操作，而JavaScript则提供了丰富的功能，如AJAX异步通信，使用户在不刷新页面的情况...
23. **向DataSet填充数据**：使用`SqlDataAdapter`可以从数据库中检索数据并填充到`DataSet`对象中。 24. **电子邮件地址格式**：正确的电子邮件地址格式是用户名@域名，如`lisi_1982@sohu.com`。 25. **软件测试*...
4. **静态包含与动态包含**：`<%@include file="xxx.jsp"%>`是静态包含，编译时合并到当前JSP页面；`<jsp:include>`是动态包含，运行时根据请求动态加载页面。 5. **List与Map的区别**：List是有序集合，元素可以...
Bootstrap 模态对话框是前端开发中常用的组件，它允许开发者创建交互式的弹窗界面，为用户提供信息或者进行一些操作。在使用 Bootstrap 的模态对话框时，有时我们需要动态地从远程URL加载数据到模态框内，以便展示...