怎樣將後臺拼接的html串顯示在彈出頁面中
阿新 • • 發佈：2019-01-25
很多專案中都有將後臺查詢出來的集合拼接成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檔案中的程式碼
4、jsp頁面中顯示出後臺返回的結果字串//彈出無改進措施目標分解頁面 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' onclick=\"javascript:openW('"+ggiId+"')\" >檢視</a>")); //分解情況檢視連結 tr.appendTo($("#eet_basemanagernorm")); } }
<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、執行效果截圖
