jsf - 单击命令按钮时如何在 PrimeFaces 灯箱中打开页面？

Question

This PrimeFaces 展示柜上的示例演示了 <p:lightBox> 的用法(iFrame)。打开一个页面，当 <h:outputLink>被点击。

我想要同样的，当 <p:commandButton>被点击。应在 <p:lightBox> 中打开一个页面, 当 <p:commandButton>被按下。

我有以下内容。

<p:lightBox iframe="true" height="90%" width="800px" widgetVar="lightBoxWidget">
    <h:outputLink value="page.jsf" style="width: 93%; text-align: left;text-align: left; height: 22px;padding: 6px 0px 0px 12px;" styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onmouseover="$(this).addClass('ui-state-hover');" onmouseout="$(this).removeClass('ui-state-hover');">
        <h:outputText value="Text"/>
        <f:param name="id" value="#{bean.id}"/>
    </h:outputLink>
</p:lightBox>

如何替换 <h:outputLink>通过 <p:commandButton> ？这里使用的样式只是让链接看起来像一个按钮。

其实我想更新一个<p:dataTable>之前<p:lightBox>已打开，以便可以将选定的行设置为关联的托管 bean。为此，<p:commandButton>非常适合代替 <h:outputLink> .

Answer 1

这似乎没有得到官方支持。所以你需要一个黑客/技巧。

基于PrimeFaces.widget.LightBox lightbox.js 中的定义, 灯箱使用 href第一个 <a>元素为 src的 <iframe> .

setupIframe: function () {
    // ...
    this.links.click(function (b) {
        if (!a.iframeLoaded) {
            // ...
            a.iframe.on("load", function () {
                // ...
            }).attr("src", a.links.eq(0).attr("href")) // <-- Here.

因此，只需在 display:none 中放置一个不可见链接(只需应用 CSS <p:lightbox> )就足够了在 <p:commandButton> 旁边.

<p:lightBox iframe="true" height="90%" width="800px" widgetVar="lightBoxWidget">
    <h:outputLink value="page.jsf" style="display:none;">
        <f:param name="id" value="#{bean.id}"/>
    </h:outputLink>
    <p:commandButton value="Text" update="..." />
</p:lightBox>

确保 <p:commandButton update>不包括 <p:lightBox>本身，否则它可能会失败。