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>

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

1 个答案: