0

我需要在两种形式之间传递一个参数，它们都在一个单独的 ui:define 中。

我有一个网站，它的左边部分是一个树表，中间部分是一个表格。我想单击左侧的一个节点并将其 id 传递给稍后将使用它的中心部分。

目标是使用户能够向左侧树表添加新类别。所以我想出了一个想法，如果用户单击树表上的“+”号，则会显示一个在此之前隐藏的表单。

这是布局的主要部分。

        <p:layoutUnit position="west" size="600" header="Categories" resizable="true" closable="false" collapsible="true">
            <h:form>
                <ui:insert name="westContent">West default content</ui:insert>
            </h:form>
        </p:layoutUnit>

        <p:layoutUnit position="center">
            <h:form>
                <ui:insert name="centerContent">Center default content</ui:insert>
            </h:form>
        </p:layoutUnit>

这是treetable所在的左侧内容。我想将 document.id 传递给位于 centerContent 的另一个表单。

<ui:define name="westContent">
    <h:form id="form">

        <p:treeTable value="#{documentsController.root}" var="document"
                     selection="#{documentsController.selectedNodes}" selectionMode="single">

            <p:column style="width:300px">
                <f:facet name="header">
                    Name
                </f:facet>
                <h:outputText value="#{document.name}" />
            </p:column>

            <p:column style="width:20px">
                <f:facet name="header">
                    Add Category
                </f:facet>
                <p:commandButton value="+" styleClass="ui-priority-primary"
                                 actionListener="#{editorBean.print}"
                                 onclick="addCategory.show();">
                </p:commandButton>

            </p:column>

        </p:treeTable>

    </h:form>
</ui:define>

这是我希望将 document.id 传递到的中心内容。

<ui:define name="centerContent">
    <h:form id="addCategoryForm">
        <p:panel id="addCategory" widgetVar="addCategory" header="New Category" style="margin-bottom:10px;" closable="true" visible="false">
            <p:messages id="messages" />
            <h:panelGrid columns="3">
                <h:outputLabel for="name" value="Name: *" />
                <p:inputText id="name" value="#{editorBean.name}" required="true" label="Name">
                    <f:validateLength minimum="2" />
                </p:inputText>
                <p:message for="name" />

                <h:outputLabel for="description" value="Description: *" />
                <p:inputText id="description" value="#{editorBean.description}" required="true" label="Description"/>
                <p:message for="description" />
            </h:panelGrid>
            <h:panelGrid columns="1">
                <h:outputLabel value="Html" />
                <pe:ckEditor id="editor" value="#{editorBean.html}" interfaceColor="#cccccc" />

                <p:commandButton id="submitButton" value="Submit" update="addCategoryForm" 
                                 icon="ui-icon-disk" actionListener="#{editorBean.print}" />
            </h:panelGrid>
        </p:panel>
    </h:form>
</ui:define>

这是我正在使用的托管 bean 的结构。

@ManagedBean
@Scope("view")
public class EditorBean {

    private String name;
    private String description;
    private String html;
    private boolean isCategory;
    private int id;

}

我习惯于使用 jsp 和在构造函数中处理事物的旧方式，所以这让我很困惑。我对这个问题的任何其他解决方案持开放态度。

我以为我可以将树表中的 id 填充到 EditorBean 中，然后再填充其余部分，但它似乎不起作用。

感谢您的回复

4

1 回答 1

0

只需在您的 bean 中拥有一个属性，该属性通过左侧表单中的命令按钮保留当前选择的文档，并以您看到的任何方式从右侧表单访问它。

例如，向您的 bean 添加一个属性：

private Document selected;//getter + setter

预设在命令按钮的动作方式（EL 2.2 及以上），或使用<f:setPropertyActionListener>（EL 低于2.2）。另请注意，这onclick是挂钩 AJAX 回调事件的错误位置，请oncomplete改用：

<p:commandButton value="+" styleClass="ui-priority-primary"
                 actionListener="#{editorBean.print}"
                 action="#{editorBean.action(document)}"
                 oncomplete="addCategory.show();">
</p:commandButton>

和

public void action(Document document) {
    selected = document;
    //other business logic
}

或者：

<p:commandButton value="+" styleClass="ui-priority-primary"
                 actionListener="#{editorBean.print}"
                 oncomplete="addCategory.show();">
    <f:setPropertyActionListener target="#{editorBean.selected}" value="#{document}" />
</p:commandButton>

这样，当前单击的项目将在您的 bean 中可用。如果需要，您可以将其分解为操作方法。它可以被其他表单引用，并且其他表单的 id 可以包含在 AJAX 更新中，以便这些更改将反映在其中。

于 2013-07-23T08:23:09.430 回答