将后台拼接的html串显示在弹出页面中

最新推荐文章于 2022-03-16 14:34:45 发布

chuge6367

最新推荐文章于 2022-03-16 14:34:45 发布

阅读量428

点赞数

文章标签： javascript java ViewUI

原文链接：https://my.oschina.net/huewenhua/blog/681550

版权

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

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

[java] view plain copy

/**
* 查询目标分解情况返回表格字符串
* @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>序号</td>");
// sb.append("<td width='8%' align=center nowrap>月份</td>");
// sb.append("<td width='10%' align=center nowrap>分解值</td>");
// sb.append("<td width='8%' align=center nowrap>季度</td>");
// sb.append("<td width='8%' align=center nowrap>分解值</td>");
// sb.append("<td width='10%' align=center nowrap>半年</td>");
// sb.append("<td width='8%' align=center nowrap>分解值</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到前台页面

[java] view plain copy

/**
* 查看目标分解信息(三四级目标)
* @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文件中的代码

[javascript] view plain copy

//弹出无改进措施目标分解页面
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页面中显示出后台返回的结果字符串

[html] view plain copy

<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>序号</td>
<td width="8%" align=center nowrap>月份</td>
<td width="10%" align=center nowrap>分解值</td>
<td width="8%" align=center nowrap>季度</td>
<td width="8%" align=center nowrap>分解值</td>
<td width="10%" align=center nowrap>半年</td>
<td width="8%" align=center nowrap>分解值</td>
</tr>
<c:out value='${decomposrList}' escapeXml='false'/>
</table>

5、总结

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

6、执行效果截图