jsp弹窗页面动态填充数据

竹叶青

2019-05-09

场景：当前页面有“查看信息”按钮，点击后在当前页面出现弹窗，弹窗里引入了描述合同信息的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">&times;</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>

jsp 大数据动态