jsp弹窗页面动态填充数据
场景：当前页面有“查看信息”按钮，点击后在当前页面出现弹窗，弹窗里引入了描述合同信息的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>