赞
踩
很多项目中都有将后台查询出来的集合拼接成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、执行效果截图
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。