在 Primefaces 中单击按钮删除 selectOneListbox / selectManyMenu 上的选择
Removing the selections on selectOneListbox / selectManyMenu on a button click in Primefaces
所以我设计了一个包含 selectOneListbox / selectManyMenu 元素的简单表单,我用它来根据用户选择生成一段文本。
一切正常。现在我想要的是当用户单击 'clear' 按钮时,应该撤消选择并且页面应该返回到初始状态(无选择)。
我怎样才能做到这一点?
xhtml
<h:form>
<h:panelGrid columns="6" style="margin-bottom:10px;" cellpadding="5" columnClasses="label, value">
<p:panel>
<h6 style="width:10.4em;background-color:#ACBECE;">Comment Type</h6>
<!-- comment type -->
<p:selectOneListbox id="basic1" value="#{decisionTreeBean.option1}" style=" font-size: 12px;background-color:silver;width:12em; height:10em; border-style:solid !important;border-width:0.5px !important; border-color:grey !important;">
<f:selectItems value="#{decisionTreeBean.commentType}" var="X" itemLabel="#{X}" itemValue="#{X}" />
</p:selectOneListbox>
</p:panel>
<p:panel>
<h6 style="width:10.4em;background-color:#ACBECE;">MTCN</h6>
<p:selectManyMenu id="advanced1" value="#{decisionTreeBean.option2}" showCheckbox="true" style="font-size: 12px;background-color:silver;width:12em; height:10em; border-style:solid !important;border-width:0.5px !important; border-color:grey !important;">
<f:selectItems value="#{decisionTreeBean.mtcns}" var="X" itemLabel="#{X}" itemValue="#{X}" />
</p:selectManyMenu>
</p:panel>
</h:panelGrid>
<!-- Text Area -->
<p:inputTextarea id="decisionNotes" readonly="#{facesContext.renderResponse}" value="#{decisionTreeBean.decisionNotes}" styleClass="dispostionInputTextArea" autoResize="true">
</p:inputTextarea>
<br/>
<p:commandButton id="generateBtn" value="Generate Text" action="#{decisionTreeBean.generateText}" update=":#{p:component('decisionNotes')}">
</p:commandButton>
<p:commandButton id="clearBtn" value="Clear" action="#{decisionTreeBean.clearText}" update=":#{p:component('decisionNotes')}">
</p:commandButton>
<p:ajaxStatus onstart="PF('statusDialog').show()"
onsuccess="PF('statusDialog').hide()" />
<p:dialog widgetVar="statusDialog" modal="true" draggable="false"
closable="false" resizable="false" showHeader="false">
<p:graphicImage value="/images/ajax-loader.gif" />
</p:dialog>
</h:form>
在我的bean 中,我有一个清除textarea 内容的clear 方法。我希望此按钮撤消选择以及 ajax 调用的一部分。
public void clearText() {
this.decisionNotes=" ";
}
(为简洁起见,我在 xhtml 中只包含了 2 列。总共有 5 个具有相同功能的独立选择列)
我也会在 bean 方法中简单地重置 Menu/Box 的值:
public void clearText() {
this.decisionNotes=" ";
this.option1 = null;
//and so on...
}
然后你只需要更新你按钮的更新属性中的组件。但如果您想刷新表单中的几乎每个组件,我会更新整个表单而不是每个组件。所以只需使用 update="@form"
:
注意:p:commandButton的默认流程值为@form。所以你的清除按钮将在每次点击时处理整个表单,尽管它不需要。我将其设置为 process="@this"
,因此它只会执行它的操作。
所以我设计了一个包含 selectOneListbox / selectManyMenu 元素的简单表单,我用它来根据用户选择生成一段文本。
一切正常。现在我想要的是当用户单击 'clear' 按钮时,应该撤消选择并且页面应该返回到初始状态(无选择)。
我怎样才能做到这一点?
xhtml
<h:form>
<h:panelGrid columns="6" style="margin-bottom:10px;" cellpadding="5" columnClasses="label, value">
<p:panel>
<h6 style="width:10.4em;background-color:#ACBECE;">Comment Type</h6>
<!-- comment type -->
<p:selectOneListbox id="basic1" value="#{decisionTreeBean.option1}" style=" font-size: 12px;background-color:silver;width:12em; height:10em; border-style:solid !important;border-width:0.5px !important; border-color:grey !important;">
<f:selectItems value="#{decisionTreeBean.commentType}" var="X" itemLabel="#{X}" itemValue="#{X}" />
</p:selectOneListbox>
</p:panel>
<p:panel>
<h6 style="width:10.4em;background-color:#ACBECE;">MTCN</h6>
<p:selectManyMenu id="advanced1" value="#{decisionTreeBean.option2}" showCheckbox="true" style="font-size: 12px;background-color:silver;width:12em; height:10em; border-style:solid !important;border-width:0.5px !important; border-color:grey !important;">
<f:selectItems value="#{decisionTreeBean.mtcns}" var="X" itemLabel="#{X}" itemValue="#{X}" />
</p:selectManyMenu>
</p:panel>
</h:panelGrid>
<!-- Text Area -->
<p:inputTextarea id="decisionNotes" readonly="#{facesContext.renderResponse}" value="#{decisionTreeBean.decisionNotes}" styleClass="dispostionInputTextArea" autoResize="true">
</p:inputTextarea>
<br/>
<p:commandButton id="generateBtn" value="Generate Text" action="#{decisionTreeBean.generateText}" update=":#{p:component('decisionNotes')}">
</p:commandButton>
<p:commandButton id="clearBtn" value="Clear" action="#{decisionTreeBean.clearText}" update=":#{p:component('decisionNotes')}">
</p:commandButton>
<p:ajaxStatus onstart="PF('statusDialog').show()"
onsuccess="PF('statusDialog').hide()" />
<p:dialog widgetVar="statusDialog" modal="true" draggable="false"
closable="false" resizable="false" showHeader="false">
<p:graphicImage value="/images/ajax-loader.gif" />
</p:dialog>
</h:form>
在我的bean 中,我有一个清除textarea 内容的clear 方法。我希望此按钮撤消选择以及 ajax 调用的一部分。
public void clearText() {
this.decisionNotes=" ";
}
(为简洁起见,我在 xhtml 中只包含了 2 列。总共有 5 个具有相同功能的独立选择列)
我也会在 bean 方法中简单地重置 Menu/Box 的值:
public void clearText() {
this.decisionNotes=" ";
this.option1 = null;
//and so on...
}
然后你只需要更新你按钮的更新属性中的组件。但如果您想刷新表单中的几乎每个组件,我会更新整个表单而不是每个组件。所以只需使用 update="@form"
:
注意:p:commandButton的默认流程值为@form。所以你的清除按钮将在每次点击时处理整个表单,尽管它不需要。我将其设置为 process="@this"
,因此它只会执行它的操作。