Question

我正在使用PrimeFaces。我在代码中使用了Collector。我想通过单击“删除”按钮删除一个数据列表，但它无法正常工作。在这里，我附上了我的代码。

代码：

<p:tab id="superDetails" titleStyleClass="tab">
    <p:panel collapsed="3" id="superid">
        <h:panelGrid  border="0" columns="3" columnClasses="control-label" >
            <h:outputText  value="Date:" />
            <p:calendar id="superDate"  navigator="true" pattern="dd/mm/yyyy"/>
            <p:commandButton id="btn_reset" value="Reset" type="reset"/>
            <p:commandButton id="btn_add" value="Add" update="books @parent"  action="#{bean.reinit}" >
                <p:collector value="#{bean.superDetails}" addTo="#{ean.superList}"  unique="true"/>
            </p:commandButton>
        </h:panelGrid>
    </p:panel>

    <p:outputPanel id="books" style="bookstyle">
        <p:dataTable value="#{bean.superList}" var="book" id="booksTable">
            <p:column headerText="Name">
                <h:outputText value="#{book.superName}" />
            </p:column>
            <p:column headerText="CertificateNo">
                <f:facet name="header">
                    <h:outputText value="CertificateNo" />
                </f:facet>
                <h:outputText value="#{book.superNo}" />
            </p:column>
            <p:column headerText="Date Of Expiry">
                <h:outputText value="#{book.superDate}" />
            </p:column>
            <p:column headerText="Action">
                <p:commandLink value="Remove" update="@(bookstyle)" process="@this" ajax="true">
                    <p:collector value="#{bean.superDetails}" removeFrom="#{bean.superList}"  unique="true"/>
                </p:commandLink>
            </p:column>
        </p:dataTable>
    </p:outputPanel>
</p:tab>

Answer 1

删除操作在您的bean上成功完成，但是页面没有更新以显示更改的列表，因为更新中的选择器不正确。将commandLink更改为以下内容，以便更新找到要更新的outputPanel：

<p:commandLink value="Remove" update="@(.bookstyle)" process="@this">
    <p:collector value="#{bean.superDetails}" removeFrom="#{bean.superList}"  unique="true"/>
</p:commandLink>

唯一的变化是现在有一个＆＃34;。＆＃34;在bookstyle之前，jQuery选择器现在将查找样式类为＆＃34; bookstyle＆＃34;的组件。

此外，所有PrimeFaces commandLink组件都默认为ajax =＆＃34; true＆＃34;所以你不需要在这种情况下加入它。

Primefaces使用＆＃39; @＆＃39;符号作为jQuery的快捷方式。因此，在更新中，您还可以使用它来通过其id：update="@(#books)"

选择outputPanel

如果您只想更新整个表单，请使用：update="@form"

要了解有关jQuery和CSS选择器的更多信息，请访问以下链接：CSS Selector Reference（jQuery和CSS选择器使用相同的语法。）

这是我的更新代码版本与不同的支持bean：

    <h:form id="exampleForm">
        <p:growl id="msgs" />

        <p:panel header="Create a new book" style="margin-bottom:20px">
            <h:panelGrid columns="2" cellpadding="5">
                <h:outputLabel value="Title : *" for="txt_title"></h:outputLabel>
                <p:inputText id="txt_title" value="#{collectorView.book.title}" required="true"/>

                <h:outputLabel value="Author : *" for="txt_author"></h:outputLabel>
                <p:inputText id="txt_author" value="#{collectorView.book.author}" required="true"/>

                <p:commandButton id="btn_reset" value="Reset" type="reset"/>
                <p:commandButton id="btn_add" value="Add" update="books msgs @parent" action="#{collectorView.reinit}" >
                    <p:collector value="#{collectorView.book}" addTo="#{collectorView.books}" unique="true"/>
                </p:commandButton>
            </h:panelGrid>
        </p:panel>

        <p:outputPanel id="books" styleClass="bookstyle">
            <p:dataTable value="#{collectorView.books}" var="book" id="booksTable">

                <p:column headerText="Title">
                    <h:outputText value="#{book.title}" />
                </p:column>

                <p:column headerText="Author">
                    <f:facet name="header">
                        <h:outputText value="Author" />
                    </f:facet>
                    <h:outputText value="#{book.author}" />
                </p:column>

                <p:column headerText="Action">
                    <p:commandLink value="Remove" update="@(.bookstyle)" process="@this">
                        <p:collector value="#{book}" removeFrom="#{collectorView.books}" unique="true"/>
                    </p:commandLink>
                </p:column>

            </p:dataTable>
        </p:outputPanel>

    </h:form>

删除PrimeFaces中的收集器列表不起作用

1 个答案: