如何使用p：ajax按顺序更新多个组件

发布时间：2020-12-16 02:46:08 所属栏目：百科来源：网络整理

导读：我正在尝试呈现以下JSF页面： h:form id="form" prependId="false" h:panelGrid width="100%" h:panelGroup id="tableDiv" layout="block" h:panelGroup layout="block" style="text-align: center;" p:dataTable id="table" var="_item" value="#{primeBean

我正在尝试呈现以下JSF页面：

<h:form id="form" prependId="false">
    <h:panelGrid width="100%">
        <h:panelGroup id="tableDiv" layout="block">
            <h:panelGroup layout="block" style="text-align: center;">
                <p:dataTable id="table" var="_item" 
                        value="#{primeBean.findTableModel()}">
                        ...
                </p:dataTable>
            </h:panelGroup>
        </h:panelGroup>
        <h:panelGrid columns="2" width="100%">
            <h:panelGroup id="barChartDiv" layout="block">
                <p:barChart id="barChart"
                    value="#{primeBean.findCartesianModel()}">
                    <p:ajax event="itemSelect" listener="#{primeBean.handleItemSelect}"
                            update="pieChartDiv,tableDiv" />
                </p:barChart>
            </h:panelGroup>
            <h:panelGroup id="pieChartDiv" layout="block">
                <h:panelGroup layout="block">
                    <p:pieChart id="pieChart">
                        <p:ajax event="itemSelect" listener="#{primeBean.handleItemSelect}" 
                                update="tableDiv" />
                    </p:pieChart>
                </h:panelGroup>
            </h:panelGroup>
        </h:panelGrid>
    </h:panelGrid>
</h:form>

当我点击p：barChart上的任何一个栏时,我希望update属性中的组件将按我声明的顺序(pieChartDiv,tableDiv)呈现,但它们以相反的顺序呈现(tableDiv,pieChartDiv).

这是正常的行为吗？如何按声明项目的顺序更新组件列表？

解决方法

这种方式不可能.将按照与JSF组件树中显示的顺序完全相同的顺序搜索和更新组件.

一种方法是重新排列/交换树层次结构中的两个组件,并借助CSS可视地重新定位它们.然而,这是相当笨拙的.

另一种方法是在完成第一个组件的更新时更新第二个组件(因此有效地结束了2个ajax请求而不是1个).您可以在完成< p：ajax>的情况下调用<p:remoteCommand>的帮助来实现这一点.

所以,而不是

<p:ajax ... update="pieChartDiv,tableDiv" />

使用

<p:ajax ... update="pieChartDiv" oncomplete="updateTableDiv()" />
...
<p:remoteCommand name="updateTableDiv" update="tableDiv" />

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!