前端页面弹出框展示详情
第一种方法：在控制层查询到数据返回给页面，在页面上写js触发弹出层。
css:
页面html
<%--比对结果--%>
未比对
一致
不一致
总提（运）单号
${obj.datas.comManifestBusiness.transContractDocId}
分提（运）单号
${obj.datas.comManifestBusiness.assTransDocId}
进出口标志
${obj.datas.comManifestBusiness.importOrExp}
申报单位名称
${obj.datas.comManifestBusiness.declOwnerName}
件数
${obj.datas.comManifestBusiness.packagingQuantity}
毛重
${obj.datas.comManifestBusiness.grossWeight}
发件人
${obj.datas.comManifestBusiness.consignorRegister}
收货人
${obj.datas.comManifestBusiness.consigneeRegister}
收/发件人证件类型
${obj.datas.comManifestBusiness.sendCertType}
收/发件人证件号码
${obj.datas.comManifestBusiness.sendCertId}
报关类别
${obj.datas.comManifestBusiness.type}
发件人地址
${obj.datas.comManifestBusiness.sendAddress}
发件人电话号码
${obj.datas.comManifestBusiness.sendTelNo}
收件人地址
${obj.datas.comManifestBusiness.consigneeAddress}
收件人电话号码
${obj.datas.comManifestBusiness.consigneeTel}
序号
商品名称
商品规格型号
申报数量
申报总价
${obj.datas.comEntryLists.gno}
${obj.datas.comEntryLists.gname}
${obj.datas.comEntryLists.gmodel}
${obj.datas.comEntryLists.gquty}
${obj.datas.comEntryLists.declTotal}
比对结果：${item.compareNode}
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 = '正在加载中...';
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 = '' + obj.msg + '' + '比对结果：'+ compareResult;
this.panel[key].html(html);
return;
}
var tableStr = '\n' +
' \n' +
' \n' +
' 总提（运）单号 \n' +
' '+ this.transCh(obj.datas.comManifestBusiness.transContractDocId)+' \n' +
' \n' +
' \n' +
' 分提（运）单号 \n' +
' '+ this.transCh(obj.datas.comManifestBusiness.assTransDocId) + ' \n' +
' \n' +
' \n' +
' 进出口标志 \n' +
' '+ this.transCh(obj.datas.comManifestBusiness.importOrExp) + ' \n' +
' \n' +
' \n' +
' 申报单位名称 \n' +
' ' +this.transCh(obj.datas.comManifestBusiness.declOwnerName)+ ' \n' +
' \n' +
' \n' +
' 件数 \n' +
' ' +this.transCh(obj.datas.comManifestBusiness.packagingQuantity) + ' \n' +
' \n' +
' \n' +
' 毛重 \n' +
' '+this.transCh(obj.datas.comManifestBusiness.grossWeight)+ ' \n' +
' \n' +
' \n' +
' 发件人 \n' +
' '+ this.transCh(obj.datas.comManifestBusiness.consignorRegister)+' \n' +
' \n' +
' \n' +
' 收货人 \n' +
' '+ this.transCh(obj.datas.comManifestBusiness.consigneeRegister)+' \n' +
' \n' +
' \n' +
' 收/发件人证件类型 \n' +
' '+ this.transCh(obj.datas.comManifestBusiness.sendCertType)+' \n' +
' \n' +
' \n' +
' 收/发件人证件号码 \n' +
' '+ this.transCh(obj.datas.comManifestBusiness.sendCertId)+ ' \n' +
' \n' +
' \n' +
' 报关类别 \n' +
' '+ this.transCh(obj.datas.comManifestBusiness.type)+ ' \n' +
' \n' +
' \n' +
' 发件人地址 \n' +
' '+ this.transCh(obj.datas.comManifestBusiness.sendAddress) + ' \n' +
' \n' +
' \n' +
' 发件人电话号码 \n' +
' '+ this.transCh(obj.datas.comManifestBusiness.sendTelNo) + ' \n' +
' \n' +
' \n' +
' 收件人地址 \n' +
' '+ this.transCh(obj.datas.comManifestBusiness.consigneeAddress) + ' \n' +
' \n' +
' \n' +
' 收件人电话号码 \n' +
' '+ this.transCh(obj.datas.comManifestBusiness.consigneeTel) + ' \n' +
' \n' +
'
\n' +
'\n' +
' \n' +
' \n' +
' 序号 \n' +
' 商品名称 \n' +
' 商品规格型号 \n' +
' 申报数量 \n' +
' 申报总价 \n' +
' \n' +
' \n' +
' ';
var len = obj.datas.comEntryLists.length;
for (var i = 0; i < len; i++){
tableStr = tableStr + '\n' +
' '+ obj.datas.comEntryLists[i].gno +' \n' +
' '+ this.transCh(obj.datas.comEntryLists[i].gname) +' \n' +
' '+ this.transCh(obj.datas.comEntryLists[i].gmodel) +' \n' +
' '+ this.transCh(obj.datas.comEntryLists[i].gquty) +' \n' +
' '+ this.transCh(obj.datas.comEntryLists[i].declTotal) +' \n' +
' ';
}
if (len == 0) {
tableStr = tableStr + ""
+""+ '无货物表比对明细数据' + " "
+" ";
}
tableStr = tableStr + '\n' +
'
\n' +
'\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 '一致'
}
if (obj == 'N') {
return '不一致'
}
return '' + obj + '';
}
}