前端页面弹出框展示详情

第一种方法：在控制层查询到数据返回给页面，在页面上写js触发弹出层。

css:

<style> .compareDiv { padding: 5px; position:absolute; width: 450px; display:none; z-index:100; border:1px solid gray; background-color:white; } </style>

页面html

<%--比对结果--%> <td> <div name="compareNode" value="${item.assTransDocId }" is-called="false"> <c:if test="${item.compareFlag=='W'}">未比对</c:if> <c:if test="${item.compareFlag=='Y'}">一致</c:if> <c:if test="${item.compareFlag=='N'}">不一致</c:if> </div> <div class="compareDiv"> <div class=""> <table class="commonTable editTable mT5 minHeight"> <tr> <th>总提（运）单号</th> <td>${obj.datas.comManifestBusiness.transContractDocId}</td> </tr> <tr> <th>分提（运）单号</th> <td>${obj.datas.comManifestBusiness.assTransDocId}</td> </tr> <tr> <th>进出口标志</th> <td>${obj.datas.comManifestBusiness.importOrExp}</td> </tr> <tr> <th>申报单位名称</th> <td>${obj.datas.comManifestBusiness.declOwnerName}</td> </tr> <tr> <th>件数</th> <td>${obj.datas.comManifestBusiness.packagingQuantity}</td> </tr> <tr> <th>毛重</th> <td>${obj.datas.comManifestBusiness.grossWeight}</td> </tr> <tr> <th>发件人</th> <td>${obj.datas.comManifestBusiness.consignorRegister}</td> </tr> <tr> <th>收货人</th> <td>${obj.datas.comManifestBusiness.consigneeRegister}</td> </tr> <tr> <th>收/发件人证件类型</th> <td>${obj.datas.comManifestBusiness.sendCertType}</td> </tr> <tr> <th>收/发件人证件号码</th> <td>${obj.datas.comManifestBusiness.sendCertId}</td> </tr> <tr> <th>报关类别</th> <td>${obj.datas.comManifestBusiness.type}</td> </tr> <tr> <th>发件人地址</th> <td>${obj.datas.comManifestBusiness.sendAddress}</td> </tr> <tr> <th>发件人电话号码</th> <td>${obj.datas.comManifestBusiness.sendTelNo}</td> </tr> <tr> <th>收件人地址</th> <td>${obj.datas.comManifestBusiness.consigneeAddress}</td> </tr> <tr> <th>收件人电话号码</th> <td>${obj.datas.comManifestBusiness.consigneeTel}</td> </tr> </table> <table class="commonTable mT5" > <thead> <tr> <th class="w40">序号</th> <th>商品名称</th> <th>商品规格型号</th> <th>申报数量</th> <th>申报总价</th> </tr> </thead> <tbody> <!-- 循环展示列表 --> <c:forEach items="${obj.datas.comEntryLists}" var="obj.datas.comEntryLists"> <tr> <td>${obj.datas.comEntryLists.gno}</td> <td>${obj.datas.comEntryLists.gname}</td> <td>${obj.datas.comEntryLists.gmodel}</td> <td>${obj.datas.comEntryLists.gquty}</td> <td>${obj.datas.comEntryLists.declTotal}</td> </tr> </c:forEach> </tbody> </table> </div> 比对结果：${item.compareNode} </div> </td>

js

$(document).ready(function(){ $("div[name=compareNode]").hover(function() { // $("#compareNode").css('display','none'); var hoverEle = $(this); var url = "${ctx}/impAuditing/compareDetail"; var assTransDocId = hoverEle.attr("value"); var isCalled = hoverEle.attr("is-called")||'false'; if(isCalled === 'false'){ $.ajax({ url : url, data : "assTransDocId="+assTransDocId, contentType: "application/x-www-form-urlencoded; charset=UTF-8", dataType: 'json', type: 'post', cache: false, sync: true, error: function(data){ // alert("请求失败"+ data.msg) }, success: function(obj){ hoverEle.next().css('display', 'block'); hoverEle.attr("is-called", "true"); } }); }else{ hoverEle.next().css('display', 'block'); } }, function() { $(this).next().css('display', 'none'); }); })

注意地方：is-called="false"的运用

方法二：在页面写ajax，请求得到数据，在页面弹出层展示，成功返回需要拼接页面字符串。

CSS:

.compareDiv { padding: 5px; position: fixed; width: 450px; border:1px solid gray; background-color:white; }

js:

/** 比对结果*/ $(document).ready(function(){ $("td[name=compareNode]").hover(function() { var hoverEle = $(this); var url = "${ctx}/impAuditing/compareDetail"; var assTransDocId = hoverEle.attr("assTransDocId"); var transContractDocId = hoverEle.attr("transContractDocId"); var compareResult = hoverEle.attr("compareStr") var isCalled = hoverEle.attr("is-called")||'false'; if(isCalled === 'false'){ comparePanel.init(hoverEle,assTransDocId); $.ajax({ url : url, data : "assTransDocId="+assTransDocId +"&transContractDocId="+ transContractDocId, contentType: "application/x-www-form-urlencoded; charset=UTF-8", dataType: 'json', type: 'post', cache: false, sync: true, error: function(obj){ alert(obj.msg); }, success: function(obj){ comparePanel.insertData(obj, assTransDocId, compareResult); hoverEle.attr("is-called", "true"); } }); }else{ comparePanel.panel[assTransDocId].css('display', 'block'); } }, function() { $("."+comparePanel.panelName).css('display', 'none'); }); }) /**面板变量*/ var comparePanel = { panelName: "compareDiv", panel: {}, /**异步请求有延时，所以在请求还没回来时，先提示 正在加载中*/ init: function (hoverEle, key) { var html = '<div class="' + this.panelName + '">正在加载中...</div>'; hoverEle.append(html); this.panel[key] = hoverEle.find(".compareDiv"); this.panel[key].css('top', '45%'); this.panel[key].css('left', '30%'); }, insertData: function (obj, key, compareResult) { if(!obj.rs){ var html = '<div class="">' + obj.msg + '</div>' + '比对结果：'+ compareResult; this.panel[key].html(html); return; } var tableStr = '<div class="">\n' + ' <table class="commonTable editTable mT5 minHeight">\n' + ' <tr>\n' + ' <th>总提（运）单号</th>\n' + ' <td>'+ this.transCh(obj.datas.comManifestBusiness.transContractDocId)+'</td>\n' + ' </tr>\n' + ' <tr>\n' + ' <th>分提（运）单号</th>\n' + ' <td>'+ this.transCh(obj.datas.comManifestBusiness.assTransDocId) + '</td>\n' + ' </tr>\n' + ' <tr>\n' + ' <th>进出口标志</th>\n' + ' <td>'+ this.transCh(obj.datas.comManifestBusiness.importOrExp) + '</td>\n' + ' </tr>\n' + ' <tr>\n' + ' <th>申报单位名称</th>\n' + ' <td>' +this.transCh(obj.datas.comManifestBusiness.declOwnerName)+ '</td>\n' + ' </tr>\n' + ' <tr>\n' + ' <th>件数</th>\n' + ' <td>' +this.transCh(obj.datas.comManifestBusiness.packagingQuantity) + '</td>\n' + ' </tr>\n' + ' <tr>\n' + ' <th>毛重</th>\n' + ' <td>'+this.transCh(obj.datas.comManifestBusiness.grossWeight)+ '</td>\n' + ' </tr>\n' + ' <tr>\n' + ' <th>发件人</th>\n' + ' <td>'+ this.transCh(obj.datas.comManifestBusiness.consignorRegister)+'</td>\n' + ' </tr>\n' + ' <tr>\n' + ' <th>收货人</th>\n' + ' <td>'+ this.transCh(obj.datas.comManifestBusiness.consigneeRegister)+'</td>\n' + ' </tr>\n' + ' <tr>\n' + ' <th>收/发件人证件类型</th>\n' + ' <td>'+ this.transCh(obj.datas.comManifestBusiness.sendCertType)+'</td>\n' + ' </tr>\n' + ' <tr>\n' + ' <th>收/发件人证件号码</th>\n' + ' <td>'+ this.transCh(obj.datas.comManifestBusiness.sendCertId)+ '</td>\n' + ' </tr>\n' + ' <tr>\n' + ' <th>报关类别</th>\n' + ' <td>'+ this.transCh(obj.datas.comManifestBusiness.type)+ '</td>\n' + ' </tr>\n' + ' <tr>\n' + ' <th>发件人地址</th>\n' + ' <td>'+ this.transCh(obj.datas.comManifestBusiness.sendAddress) + '</td>\n' + ' </tr>\n' + ' <tr>\n' + ' <th>发件人电话号码</th>\n' + ' <td>'+ this.transCh(obj.datas.comManifestBusiness.sendTelNo) + '</td>\n' + ' </tr>\n' + ' <tr>\n' + ' <th>收件人地址</th>\n' + ' <td>'+ this.transCh(obj.datas.comManifestBusiness.consigneeAddress) + '</td>\n' + ' </tr>\n' + ' <tr>\n' + ' <th>收件人电话号码</th>\n' + ' <td>'+ this.transCh(obj.datas.comManifestBusiness.consigneeTel) + '</td>\n' + ' </tr>\n' + ' </table>\n' + '<table class="commonTable mT5" >\n' + ' <thead>\n' + ' <tr>\n' + ' <th >序号</th>\n' + ' <th>商品名称</th>\n' + ' <th>商品规格型号</th>\n' + ' <th>申报数量</th>\n' + ' <th>申报总价</th>\n' + ' </tr>\n' + ' </thead>\n' + ' <tbody>'; var len = obj.datas.comEntryLists.length; for (var i = 0; i < len; i++){ tableStr = tableStr + '<tr>\n' + ' <td> '+ obj.datas.comEntryLists[i].gno +' </td>\n' + ' <td> '+ this.transCh(obj.datas.comEntryLists[i].gname) +'</td>\n' + ' <td> '+ this.transCh(obj.datas.comEntryLists[i].gmodel) +'</td>\n' + ' <td> '+ this.transCh(obj.datas.comEntryLists[i].gquty) +'</td>\n' + ' <td> '+ this.transCh(obj.datas.comEntryLists[i].declTotal) +'</td>\n' + ' </tr>'; } if (len == 0) { tableStr = tableStr + "<tr style='text-align: center'>" +"<td colspan='5'>"+ '无货物表比对明细数据' + "</font></td>" +"</tr>"; } tableStr = tableStr + '</tbody>\n' + ' </table>\n' + '</div>\n' + '比对结果：'+ compareResult ; this.panel[key].css('top', '10px'); this.panel[key].css('left', '30%'); this.panel[key].html(tableStr); }, /**字符转义*/ transCh: function (obj) { if ((typeof(obj) == "undefined")) { return ''; } if (obj == 'Y'){ return '<font style="color: black">一致</font>' } if (obj == 'N') { return '<font style="color: red">不一致</font>' } return '<font style="color: black">' + obj + '</font>'; } }