我有一个数据表。该表的每一行都有一个名为“Remove”的commandButton
,它应该从模型和视图中删除该行并就地执行更新。作为一个页脚,我有另一个名为'删除每一行'的commandButton
。
最后一个按钮有效。我点击它,每一行都从模型中删除(即包含元素的ArrayList
变为空),并在视图中重新渲染(或更新)dataTable
和footer facet
。
另一方面,当我单击其中一行上的按钮时,为了将其删除,它会部分起作用。从模型中删除相应的元素,但不更新视图。在dataTable
那行仍然存在,footer facet
没有改变。
我在users.xhtml
中有以下代码。
<f:metadata>
<f:viewParam name="id" value="#{users.id}" />
<f:event type="preRenderView" listener="#{users.init}" />
</f:metadata>
...
<h:form id="usersForm">
<p:outputPanel>
<p:dataTable id="userTable" value="#{users.user.friendList}" var="friend">
<p:column>
<h:outputText value="#{friend.name}" />
</p:column>
<p:column>
<p:commandButton action="#{users.user.removeFriend(friend)}"
ajax="true"
update="userTable somethingElse" process="@this"
onerror="errorDialog.show();"
icon="ui-icon-delete"
title="delete user">
</p:commandButton>
</p:column>
<f:facet id="somethingElse" name="footer">
aye: ${users.user.xxx}
</f:facet>
</p:dataTable>
</p:outputPanel>
<p:commandButton action="#{users.user.removeAllFriends()}" ajax="true"
update="userTable somethingElse"
process="@this"
icon="ui-icon-close"
value="delete all friends?">
</p:commandButton>
</h:form>
那么,您认为这里的问题是什么?
我正在使用JSF 2.0和Primefaces 3.0
我从当前的PF 3.0页面中认识到这个问题。如果你使用update="@form"
它会工作。我没有真正的时间来调查真正的原因,以便我可以向PF人员报告,因为这个问题并没有在所有页面中出现。即使在同一张桌子中,一个不同的按钮也可以用作。
试试看:
<p:commandButton update="@form" ... />
更新:想想它,它可能与process="@this"
的存在有关。
您可能正在使用Primefaces 2.2.1,因为这似乎是由于Primefaces dataTable组件的常见错误。基本上发生的是,从dataTable的元素内部发生的ajax回发不会导致dataTable中元素的部分页面更新。
最简单的解决方法是从dataTable外部的按钮调用回发,其唯一目的是简单地部分页面更新dataTable。这不是最有效的解决方案,因为它会产生两个回发,但它确实有效。
请参阅我之前对此问题的回答Here
如果要使用服务器ID更新组件(如userTable
,somethingElse
,...),则这些组件需要与触发更新的组件(例如,按钮)位于同一命名容器中。否则,您需要在update属性中使用这样的表达式:update=":usersForm:userTable"
。
主要问题是识别命名容器。外部按钮确实有效,因为它与ID为userTable
的表位于同一命名容器(表单)中。由于整个表都得到更新,因此facet会更新,但由于datatable本身就是一个命名容器,因此只能在外部按钮上使用update="somethingElse"
来更新页脚。
我不确定,为什么内部按钮不起作用。我猜数据表中还有另一个命名容器。如果使用findComponent实现的UIComponent算法找不到组件,PrimeFaces会记录INFO。 INFO: Cannot find component with identifier "userTable" in view.
这是在jsf 2.0中刷新的解决方案
<p:dataTable id="empl1" var="emp" value="#{dtEmployeeView.employee}" selectionMode="multiple" rowKey="#{emp.id}"
paginator="true" rows="5" tableStyleClass="ui-table-columntoggle">
<p:column width="20" headerText="Id" priority="1">
<h:link value="#{emp.id}" />
</p:column>
<p:column headerText="Employee Name" priority="2">
<h:outputText value="#{emp.pname}" />
</p:column>
</p:dataTable>
<p:commandButton update="form1:empl1" ajax="true" value="Submit" action="#{empService.addEmployee(employee)}" >
<f:event type="preRenderView" listener="#{dtEmployeeView.init()}"/>
</p:commandButton>
我的数据表中有过滤器。所以我在这里解决了这个问题
oncomplete="PF('myWidgetVar').filter()" and update="@form"
我使用update="@form"
并没有完全奏效:例如,它没有更新dataTable中的行数。我已经拥有的是在更新表单的按钮上:
process="@this" oncomplete="updateRC();"
然后就在我的下面:
<p:remoteCommand name="updateRC" process="@this" update="@form" />
我为修复行更新问题所做的是将一个styleClass添加到dataTable,例如“myTable”,然后在上面的remoteCommand中为该类添加一个jQuery选择器,例如:
<p:remoteCommand name="updateRC" process="@this" update="@form @(.myTable)" />