Question

我有{"year":2003:"companyName":"D1", "totalRevenue":3000, "prevyear":2002,"lastcompanyname":"D1","trends":(2000+1000 - 5000) /5000 * 100 = -40} {"year":2003:"companyName":"D2", "totalRevenue":0, "prevyear":2002,"lastcompanyname":"D2","trends":(0-4000)/4000 * 100 = -100 } {"year":2003:"companyName":"D3", "totalRevenue":0, "prevyear":2002,"lastcompanyname":"D3","trends":(0-3000)/3000 * 100 = -100 }页面，其中包含parent.xhtml页面。在子页面中，我有一个按钮，在单击它时我想在父页面中触发一个监听器/动作事件（假设我想从父bean中执行一个方法）。

编辑：我需要尽可能使子页面成为原子页面，这样它也可以在其他父项/包装器中重用。这意味着简单地让它广播一个可以被任何人作为父页面监听的事件。

parent.xhtml：

child.xhtml

child.xhtml

<ui:include src="/content/childPage.xhtml"></ui:include>

我正在使用PrimeFaces 6，JSF 2。

Answer 1

你的两个'页面'只是一个html页面的客户端。因此，您可以使用一个非常简单的“基于事件”的解决方案，将PrimeFaces remoteCommand与jquery事件处理相结合

在client.xhtml中：

<p:commandButton type="button" value="Click me" onclick="$(document).trigger("myevent");" />

在parent.xhtml中：

<script>
    $(document).on("myevent", rc);
</script>

<p:remoteCommand name="rc" update="msgs" actionListener="#{parentViewBean.execute}" />

然后，父母可以完全轻松地定义要调用的操作。缺点是，如果父级中没有“事件”处理程序，则该按钮似乎不执行任何操作。如果这是一个问题，那可以解决。

将client.xhtml更改为：

<p:commandButton type="button" value="Click me" onclick="fireEventIfPresent" />

<script>
function fireEventIfPresent() {
    if($._data(document, "events")['myevent']) { // check if eventhandler is present
        $(document).trigger("myevent");         
    } else {
        alert('No event handler in parent page');
    }
}
</script>

Answer 2

要将child.xhtml的数据信息发送到您的parent.xhtml，您必须ManagedProperty添加ChildManagedBean，并引用您的ParentManagedBean。

<强> ChildManagedBean.java

@ManagedProperty(value = "#{parentManagedBean}")
private ParentManagedBean e;

现在让我们从child.xhtml

中看到这一点

<强> child.xhtml

<p:commandButton actionListner="#{childManagedBean.doSomething()}"....>
</p:commandButton>

<强> ChildManagedBean.java

public void doSomething(){
    Boolean test = Boolean.TRUE;
    e.methodGetInfof(test);
}

要使其可重复使用，您必须将其添加到parent.xhtml

<强> parent.xhtml

<ui:include src="/content/childPage.xhtml">
    <ui:param name="action" value="executeMethod"/>
    <ui:param name="bean" value="#{ManagedBean}" />
</ui:include>

并将其添加到您的child.xhtml

<强> child.xhtml

<p:commandButton actionListener="#{bean[action]()}"....>
</p:commandButton>

希望能帮到你。

如何在PrimeFaces中包含的页面中触发父页面中的事件？

2 个答案: