在 jsf Web 应用程序中使用 ajax 加载更多内容

Question

我正在使用 jsf 2.2 和 primefaces 4.0 构建一个 Web 应用程序。

在我称之为实验视图的一个页面上，我列出了保存在数据库中的实验的结果。有些实验可能有很长的实验结果列表，从列表中的每个结果中，我为该结果构建一个数值表，然后为该数据构建一个图表（使用谷歌图表）。当一个实验包含大约 100 个结果时，需要在该页面上构建 100 个表格和 100 个图表，这需要很长时间，所以我需要找到一个解决方案来解决这个问题。

首先我尝试只渲染所有表格，这不会花费太多时间，然后在用户向下滚动时逐步绘制图表。我无法以令人满意的方式完成这项工作，所以我决定尝试其他方法。

我现在的想法是使用一个命令按钮，当点击该按钮时会触发一个 ajax 调用，并在之前渲染的下面注入大约 10 个新的实验结果。但在这里我有点卡住了。我不知道如何在不覆盖之前呈现的列表项的情况下实现这一点。

这是当前呈现列表的文档部分的外观：

<h:form id="assayDataForm" >
<div style="height: 1000px;overflow: scroll !important;" >
    <ui:repeat id="loaded" value="#{exp.loadedAssays}" var="a" >                    
        <div style="width: 900px !important;">
            <p:dataTable style="width:300px !important;  float: left !important;" value="#{a.data}" var="data"  >
                <f:facet name="header" >                                                        
                <h:outputText  value="Data from assay #{exp.expDetail.assayList.indexOf(a) + 1} " />
                </f:facet>
                <p:column headerText="Labels">
                    #{data.labels}
                </p:column>
                <p:column headerText="Value">
                    #{data.value}
                </p:column>                                             
            </p:dataTable>         
        <div id="chart_div#{a.id}" style="width: 600px !important; height: 450px !important; float: left !important;"></div>   
        </div>       
    </ui:repeat>    
</div>
    <h:commandLink rendered="#{exp.totalAssays > exp.loadedAssays.size()}" action="#{exp.loadNextNAssays()}" value="Load more values" >
        <f:ajax render="assayDataForm" execute="@form"  />
    </h:commandLink>        
</h:form>

关于如何修改它以免覆盖以前的内容的任何提示？

Answer 1

您可以使用一个隐藏面板，其中仅包含最新（比方说）10 个结果。您将拥有另一个面板，该面板最初已加载并包含前 N 条记录。

每次 ajax 请求完成时，您将呈现“newResultsPanel”，然后使用 javascript/jquery 将其内容附加到“initialResultsPanel”。

<div id="initialResultsPanel" ...>
    ...
</div>
<h:panelGroup layout="block" id="newResultsPanel" style="display: none;" >
    <ui:repeat id="loaded" value="#{exp.loadedAssays}" var="a" >                    
        ...
    </ui:repeat>    
</h:panelGroup>
<h:commandLink rendered="#{exp.totalAssays > exp.loadedAssays.size()}" action="#{exp.loadNextNAssays()}" value="Load more values" >
    <f:ajax render="newResultsPanel" execute="@form" onevent="eventCompleted" />
</h:commandLink>

<script>
function eventCompleted(data) {
    if (data.status == "success") {
        $('#initialResultsPanel').append($('#newResultsPanel').html());
    }
} 
</script>