怎样将后台拼接的html串显示在弹出页面中_把接口返回的html插到弹窗里

很多项目中都有将后台查询出来的集合拼接成html字符串，然后显示在弹出页面中，下面结合我做的项目讲一讲具体如何实现。

1、后台service层根据条件查询出结果集合，并拼成string

/**
	 * <p>查询目标分解情况返回表格字符串</p>
	 * @param id
	 * @return
	 */
	public String searchDecomposeInfo(String id){
		List<GmcValueDecompose> decomposeList = seachDecomposeList(id);
		StringBuilder sb=new StringBuilder(); 
		if(decomposeList != null && decomposeList.size() > 0){
//			 sb.append("<tr class='lc2' bgcolor='ccdef4'>");
//			 sb.append("<td width='4%' align=center nowrap><font color='486d99'>序号</font></td>");
//			 sb.append("<td width='8%' align=center nowrap><font color='486d99'>月份</font></td>");
//			 sb.append("<td width='10%' align=center nowrap><font color='486d99'>分解值</font></td>");
//			 sb.append("<td width='8%' align=center nowrap><font color='486d99'>季度</font></td>");
//			 sb.append("<td width='8%' align=center nowrap><font color='486d99'>分解值</font></td>");
//			 sb.append("<td width='10%' align=center nowrap><font color='486d99'>半年</font></td>");
//			 sb.append("<td width='8%' align=center nowrap><font color='486d99'>分解值</font></td>");
//			 sb.append("</tr>");
			 
			 sb.append("<tr>");  
			 GmcValueDecompose lip = decomposeList.get(0);
			 sb.append("<td>1</td>");
			 sb.append("<td>"+lip.getGvdMonth()+"月</td>");
			 sb.append("<td>"+lip.getGvdPlanValue()+"</td>");
			 sb.append("<td>一季度</td>");
			 sb.append("<td>"+lip.getGvdPlanValueQua()+"</td>");
			 sb.append("<td>上半年</td>");
			 sb.append("<td>"+lip.getGvdPlanValueHalf()+"</td></tr>");
			 
			 GmcValueDecompose lip1 = decomposeList.get(1);
			 sb.append("<tr>");  
			 sb.append("<td>2</td>");
			 sb.append("<td>"+lip1.getGvdMonth()+"月</td>");
			 sb.append("<td>"+lip1.getGvdPlanValue()+"</td>");
			 sb.append("<td>二季度</td>");
			 sb.append("<td>"+lip1.getGvdPlanValueQua()+"</td>");
			 sb.append("<td>下半年</td>");
			 sb.append("<td>"+lip1.getGvdPlanValueHalf()+"</td></tr>");
			 
			 GmcValueDecompose lip2 = decomposeList.get(2);
			 sb.append("<tr>");  
			 sb.append("<td>3</td>");
			 sb.append("<td>"+lip2.getGvdMonth()+"月</td>");
			 sb.append("<td>"+lip2.getGvdPlanValue()+"</td>");
			 sb.append("<td>三季度</td>");
			 sb.append("<td>"+lip2.getGvdPlanValueQua()+"</td>");
			 sb.append("<td></td>");
			 sb.append("<td></td></tr>");
			 
			 GmcValueDecompose lip3 = decomposeList.get(3);
			 sb.append("<tr>");  
			 sb.append("<td>4</td>");
			 sb.append("<td>"+lip3.getGvdMonth()+"月</td>");
			 sb.append("<td>"+lip3.getGvdPlanValue()+"</td>");
			 sb.append("<td>四季度</td>");
			 sb.append("<td>"+lip3.getGvdPlanValueQua()+"</td>");
			 sb.append("<td></td>");
			 sb.append("<td></td></tr>");
			 
			 //---------------------------以上为前4行--------------------------
			 for(int i=4; i < decomposeList.size(); i++){
				 GmcValueDecompose lip4 = decomposeList.get(i);
				 sb.append("<tr>");  
				 sb.append("<td>"+(i+1)+"</td>");
				 sb.append("<td>"+lip4.getGvdMonth()+"月</td>");
				 sb.append("<td>"+lip4.getGvdPlanValue()+"</td>");
				 sb.append("<td></td>");
				 sb.append("<td></td>");
				 sb.append("<td></td>");
				 sb.append("<td></td></tr>");
			 }
			 return sb.toString();
		}else{
			return null;
		}		
	}

2、controller层调用该方法，并将结果集合串render到前台页面

/**
	 * <p>查看目标分解信息(三四级目标)</p>
	 * @param id
	 */
	public void showDecomposeList(String id){
		String measureFrequen1 = "";
		String decomposrList = gmcValueDecomposeService.searchDecomposeInfo(id);
		GmcGoalInformation gmcGoalInformation = gmcGoalInformationHinService.findById(id);
		if(StringUtils.isNotEmpty(gmcGoalInformation.getGgiMeasureFrequency())){
			measureFrequen1 = gmcGoalInformation.getGgiMeasureFrequency().replace("0", "年度");
			measureFrequen1 = measureFrequen1.replace("1", "半年");
			measureFrequen1 = measureFrequen1.replace("2", "季度");
			measureFrequen1 = measureFrequen1.replace("3", "月度");
		}
		//将替换过的测量频次设置到该字段中
		gmcGoalInformation.setGgiMeasureFrequency(measureFrequen1);
		View view = new View(SUCCESS);
        view.bind("decomposrList", decomposrList);
        view.bind("gmcGoalInformation", gmcGoalInformation);
        this.render(view);
	}

3、js文件中的代码

//弹出无改进措施目标分解页面
function openW(id){
	var obj=window;
	window.showModalDialog('/hiniso/gmcGoalInformation/showDecomposeList/'+id,obj,"dialogWidth:700px;status:no;dialogHeight:600px;location:no;");
}
 
 
//导入后添加行
function addSaveNewDataEet_basemanagernorm(data){
	var po = data.split("&");
	for(var i=0;i<po.length-1;i++){
		var attr = po[i].split("@");
		var tr = $("<tr></tr>").attr("bgcolor","#FFFFFF");
		var index = attr[0].indexOf("*");		
		var rowNum = attr[0].substring(0,index);	//截取序号部分
		var ggiId = attr[0].substring(index+1);	//目标信息ID
		
      	tr.append($("<td></td>").html(rowNum));	//序号
	    tr.append($("<td></td>").html(attr[1]));	//指标编码
		tr.append($("<td></td>").html(attr[2]));	//指标名称
		tr.append($("<td></td>").html(attr[3]));	//年度目标值
		tr.append($("<td></td>").html(attr[4]));	//目标释义
		tr.append($("<td></td>").html(attr[5]));	//目标计算方法
		tr.append($("<td></td>").html(attr[6]));	//统计周期
		tr.append($("<td></td>").html(attr[7]));	//责任部门
		tr.append($("<td></td>").html(attr[8]));	//判断方式
		tr.append($("<td></td>").html("<a herf='###' style='color:blue;cursor:hand' οnclick=\"javascript:openW('"+ggiId+"')\" >查看</a>"));	//分解情况查看链接
		tr.appendTo($("#eet_basemanagernorm"));					  
	}
}

 

4、jsp页面中显示出后台返回的结果字符串

<table class="table">
		<caption class="ui-corner-top"><c:out value='${gmcGoalTask.ggtTaskName}'/></caption>
	</table>
 	<form id="gmcGoalTaskForm" action=""  method="post">
	<table id="eet_basemanagernorm"  class="grid">
		
			<tr class="lc2" bgcolor="ccdef4">
				<td width="4%" align=center nowrap><font color="486d99">序号</font></td>			
				<td width="8%" align=center nowrap><font color="486d99">月份</font></td>
				<td width="10%" align=center nowrap><font color="486d99">分解值</font></td>
				<td width="8%" align=center nowrap><font color="486d99">季度</font></td>
				<td width="8%" align=center nowrap><font color="486d99">分解值</font></td>
				<td width="10%" align=center nowrap><font color="486d99">半年</font></td>
				<td width="8%" align=center nowrap><font color="486d99">分解值</font></td>						
			</tr>		
		<!--此处为grid内容-->
			<c:out value='${decomposrList}' escapeXml='false'/>		
	</table>

5、总结

    关键在于js中openW(id)方法中window.showModalDialog(url,obj,'')的使用，showModalDialog()方法弹出的只是一个网页对话框，而不是一个jsp页面，因此在该方法的url参数中执行controller中的showDecomposeList()方法，执行完之后转向到一个jsp页面，这样就可以在该页面上输出后台查询出来的结果字符串。否则只有网页对话框就无法把后台的数据展示出来。

6、执行效果截图