我们有一个报告，当用户点击特定行的对话框链接时，会出现一个模式对话框，其中包含有关该特定行的其他详细信息。目前，我们不会动态加载这些数据，因为我们希望对话框中的数据与聚合行匹配，所以我们之前有理由这样做。
原来我从存储过程中提取的数据我不拥有需要很多秒才能加载（因为它是计算的而不是聚合的），并且因为它没有动态加载对话框内容，所以它减慢了这个报告显着，因为页面上的数据是聚合的，但对话框中的数据不是。 IMO数据调用是根本原因并且需要修复，但暂时我不得不将加载时间移动到对话框加载数据时。
我希望从此处动态加载此内容，类似于here
但是，由于对话框链接，我还为该被点击的元素提供了一个唯一的对话框，其中包含从该特定链接的DB中检索的内容，我不确定我是否可以简单地执行某个特定的.load（）页面没有传递它点击了什么链接等。
当前功能：
HTML：
<c:if test="${seg.user.sbaEnabled && seg.sbaParamEnabled}">
<c:set var="dialogcount" value="0" scope="page" />
<c:forEach var="segment" items="${seg.dataList}">
<c:set var="dialogcount" value="${dialogcount + 1}" scope="page"/>
<div id="dialog<c:out value="${dialogcount}"/>" class="hidden" title="<spring:message code="perfseg.sbasegtitle"/> (<c:out value="${segment.segment}"/>)">
<div class="theaddiv">
<table class="reportingheader" style="width:100%;">
<thead>
<tr>
<th style="width:32%;">
<spring:message code="perfseg.sbasalesassociate"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbasales"/>
</th>
<th style="width:15%;">
<spring:message code="perfseg.sbapersales"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbatrans"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbaads"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbaupt"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbaspah"/>
</th>
<!--Spacing for scrollbar alignment-->
<th style="width:3%;">
</th>
</tr>
</thead>
</table>
</div>
<div class="tbodydiv" style="width: 100%;">
<table class="reportingbody" style="width:100%;">
<tbody>
<c:forEach var="sba" items="${segment.sbaList}">
<tr>
<td style="width:32%">
<c:if test="${sba.name ne 'Unassigned'}"><c:out value='${sba.name}'/></c:if>
<c:if test="${sba.name eq 'Unassigned'}"><spring:message code="perfseg.sbaunassigned"/></c:if>
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sba.sales}' type="number"/>
</td>
<td class="center" style="width:15%;">
<fmt:formatNumber value='${sba.percentSales}' type="number" minFractionDigits="1" maxFractionDigits="1"/>%
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sba.trans}' type="number"/>
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sba.ads}' type="number" minFractionDigits="2" maxFractionDigits="2"/>
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sba.upt}' type="number" minFractionDigits="2" maxFractionDigits="2"/>
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sba.spah}' type="number" minFractionDigits="2" maxFractionDigits="2"/>
</td>
<td style="width:3%;">
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<hr style="height:1px; border:none; color: #AAAAAA; background-color: #AAAAAA;"/>
</div>
</c:forEach>
<div id="dialogbtnttl" class="hidden" title="<spring:message code="perfseg.sbadaytitle"/>">
<div class="theaddiv">
<div class="hidden center">
<b class="infoTextBig"><spring:message code="perfseg.sbadaytitle"/></b>
<br>
<div class="infoText">
<c:out value="${seg.brandName}"/> - <%=SystemConfig.getTranslatedTextByKey(LBIBOConstants.LANG_KEY_COMMON_TXTSTORE, userLocale)%> <c:out value="${seg.legacyStoreId}"/>
</div>
<br>
<%@ include file="../include/print_header.jsp" %>
<br>
<fmt:formatDate pattern="${seg.rptDateFormat}" value="${seg.transDate}" />
<br>
<br>
</div>
<table class="reportingheader" style="width:100%;">
<thead>
<tr>
<th style="width:32%;">
<spring:message code="perfseg.sbasalesassociate"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbasales"/>
</th>
<th style="width:15%;">
<spring:message code="perfseg.sbapersales"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbatrans"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbaads"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbaupt"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbaspah"/>
</th>
<!--Spacing for scrollbar alignment-->
<th style="width:3%;">
</th>
</tr>
</thead>
</table>
</div>
<div class="tbodybtndiv" style="width: 100%;">
<table class="reportingbody" style="width:100%;">
<tbody>
<c:forEach var="sbaTotal" items="${seg.sbaList}">
<tr>
<td style="width:32%">
<c:if test="${sbaTotal.name ne 'Unassigned'}"><c:out value='${sbaTotal.name}'/></c:if>
<c:if test="${sbaTotal.name eq 'Unassigned'}"><spring:message code="perfseg.sbaunassigned"/></c:if>
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sbaTotal.sales}' type="number"/>
</td>
<td class="center" style="width:15%;">
<fmt:formatNumber value='${sbaTotal.percentSales}' type="number" minFractionDigits="1" maxFractionDigits="1"/>%
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sbaTotal.trans}' type="number"/>
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sbaTotal.ads}' type="number" minFractionDigits="2" maxFractionDigits="2"/>
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sbaTotal.upt}' type="number" minFractionDigits="2" maxFractionDigits="2"/>
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sbaTotal.spah}' type="number" minFractionDigits="2" maxFractionDigits="2"/>
</td>
<td style="width:3%;">
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</c:if>
JS用于链接和对话：
$( "[id^=dialog]").dialog({
width: 555,
height: 315,
autoOpen: false,
resizable: false,
modal: true,
closeOnEscape: true
});
$( "#dialogbtnttl").dialog({
width: 555,
height: 315,
autoOpen: false,
resizable: false,
modal: true,
buttons: dialogButtons,
closeOnEscape: true
});
// Link to open the dialog
$( ".dialog-link" ).click(function() {
//event.preventDefault();
var btnflag = $( this ).attr("data-btnflag");
var seg = $( this ).attr( "data-seg" );
if (btnflag == "false"){
$( "#dialog"+seg ).removeClass("hidden");
$( "#dialog"+seg ).dialog( "open" );
}
else {
$( "#dialogbtnttl" ).removeClass( "hidden" );
$( "#dialogbtnttl" ).dialog( "open" );
}
});
有人在接受我必须做的这项改变时有任何建议吗？加载时，如何加载特定报表行的唯一数据？
编辑1 -
我正在通过API阅读更多的.load，显然我们可以传递一些参数，这些参数可能有助于唯一标识正在请求数据的行，但我不确定这些参数的使用方式/由我必须创建的包含对话框内容的页面本身检索。
在这一点上，可能有一些更好的解决方案，我只是没想到。
答案 0 :(得分：1)
我从未使用过JQuery的加载方法。但我使用JQuery Ajax方法使用Web服务调用来完成类似的动态内容加载（主要是下拉），以获取我需要的数据。
您可以使用具有所需数量的参数的Web服务调用获取数据，然后对结果使用load来动态填充所需内容。
就像我说的那样，我从来没有使用过加载方法，所以我可能完全不知道它是如何工作的，但这只是我的两分钱。
编辑： 另一方面，Ajax方法以异步方式运行，因此您可以同时通过Web服务调用加载多组动态内容。
编辑2： 根据讨论，这里是标准JQuery Ajax函数的包装函数。要使用它，只需将方法名称作为字符串传递，将参数作为对象传递（例如：var parameters = [param1：'hello']，确保param1与Web方法参数名称完全匹配），以及要成功调用的函数（必须接受作为返回数据的单个参数）。此功能可能需要根据您的Web服务设置进行更改。
function makeWsCall(methodNameVar, paramatersVar, successFunc) {
jQuery.support.cors = true; // force cross-site scripting (as of jQuery 1.5)
$.ajax({
url: '<%=postUrlCodeBehind%>' + "/" + methodNameVar, // url + method name
type: 'GET', // http request type
data: paramatersVar, // paramaters to be passed to the ws
ContentType: "application/json; charset=utf-8",
dataType: 'json', // expected return type
//traditional: true,
// dataType: 'jsonp',
timeout: 200000, // timeout, may not be needed
success: function (data) {
var returnObject = eval(data);
successFunc(returnObject); // call the function passed to the method
}, //successFunc(data),
error: function (data) { // on error method
// do nothing on error
}
});
};