后台拼接html图片怎么显示,怎样将后台拼接的html串显示在弹出页面中

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

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

/**

*

查询目标分解情况返回表格字符串

* @param id

* @return

*/

public String searchDecomposeInfo(String id){

List decomposeList = seachDecomposeList(id);

StringBuilder sb=new StringBuilder();

if(decomposeList != null && decomposeList.size() > 0){

// sb.append("

");

// sb.append("

序号");

// sb.append("

月份");

// sb.append("

分解值");

// sb.append("

季度");

// sb.append("

分解值");

// sb.append("

半年");

// sb.append("

分解值");

// sb.append("

");

sb.append("

");

GmcValueDecompose lip = decomposeList.get(0);

sb.append("

1");

sb.append("

"+lip.getGvdMonth()+"月");

sb.append("

"+lip.getGvdPlanValue()+"");

sb.append("

一季度");

sb.append("

"+lip.getGvdPlanValueQua()+"");

sb.append("

上半年");

sb.append("

"+lip.getGvdPlanValueHalf()+"");

GmcValueDecompose lip1 = decomposeList.get(1);

sb.append("

");

sb.append("

2");

sb.append("

"+lip1.getGvdMonth()+"月");

sb.append("

"+lip1.getGvdPlanValue()+"");

sb.append("

二季度");

sb.append("

"+lip1.getGvdPlanValueQua()+"");

sb.append("

下半年");

sb.append("

"+lip1.getGvdPlanValueHalf()+"");

GmcValueDecompose lip2 = decomposeList.get(2);

sb.append("

");

sb.append("

3");

sb.append("

"+lip2.getGvdMonth()+"月");

sb.append("

"+lip2.getGvdPlanValue()+"");

sb.append("

三季度");

sb.append("

"+lip2.getGvdPlanValueQua()+"");

sb.append("

");

sb.append("

");

GmcValueDecompose lip3 = decomposeList.get(3);

sb.append("

");

sb.append("

4");

sb.append("

"+lip3.getGvdMonth()+"月");

sb.append("

"+lip3.getGvdPlanValue()+"");

sb.append("

四季度");

sb.append("

"+lip3.getGvdPlanValueQua()+"");

sb.append("

");

sb.append("

");

//---------------------------以上为前4行--------------------------

for(int i=4; i < decomposeList.size(); i++){

GmcValueDecompose lip4 = decomposeList.get(i);

sb.append("

");

sb.append("

"+(i+1)+"");

sb.append("

"+lip4.getGvdMonth()+"月");

sb.append("

"+lip4.getGvdPlanValue()+"");

sb.append("

");

sb.append("

");

sb.append("

");

sb.append("

");

}

return sb.toString();

}else{

return null;

}

}

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

/**

*

查看目标分解信息(三四级目标)

* @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

var attr = po[i].split("@");

var 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($("

").html(rowNum));//序号

tr.append($("

").html(attr[1]));//指标编码

tr.append($("

").html(attr[2]));//指标名称

tr.append($("

").html(attr[3]));//年度目标值

tr.append($("

").html(attr[4]));//目标释义

tr.append($("

").html(attr[5]));//目标计算方法

tr.append($("

").html(attr[6]));//统计周期

tr.append($("

").html(attr[7]));//责任部门

tr.append($("

").html(attr[8]));//判断方式

tr.append($("

").html(" 查看"));//分解情况查看链接

tr.appendTo($("#eet_basemanagernorm"));

}

}

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

序号

月份

分解值

季度

分解值

半年

分解值

5、总结

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

6、执行效果截图