很多项目中都有将后台查询出来的集合拼接成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、执行效果截图
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
