4

我正在尝试呈现以下 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，我希望更新属性中的组件将按照我声明的顺序呈现(pieChartDiv,tableDiv)，但它们以相反的顺序呈现(tableDiv,pieChartDiv)。

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

4

2 回答 2

11

这是不可能的。组件的搜索和更新顺序与它们在 JSF 组件树中出现的顺序完全相同。

一种方法是重新排列/交换树层次结构中的两个组件，并在 CSS 的帮助下重新定位它们。然而，这相当笨拙。

另一种方法是在第一个组件的更新完成后更新第二个组件（因此实际上最终得到 2 个 ajax 请求而不是 1 个）。您可以<p:remoteCommand>在完成<p:ajax>.

所以，而不是

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

采用

<p:ajax ... update="pieChartDiv" oncomplete="updateTableDiv()" />
...
<p:remoteCommand name="updateTableDiv" update="tableDiv" />
于 2013-03-19T13:52:59.090 回答
1

不是那么优雅但可行的解决方案可能是这样的：

<p:barChart id="barChart" 
    value="#{primeBean.findCartesianModel()}">
    <p:ajax event="itemSelect" listener="#{primeBean.handleItemSelect}" 
        update="pieChartDiv" /> <!-- This will be updated as first. -->
    <p:ajax event="itemSelect" 
        update="tableDiv" /> <!-- And this will be updated as second. -->
</p:barChart>
于 2014-02-10T22:19:07.703 回答