p:remoteCommand 在像 p:dataTable 这样的迭代组件中仅适用于最后一行答案

【问题标题】：p:remoteCommand inside iterating component like p:dataTable only works for last rowp:remoteCommand 在像 p:dataTable 这样的迭代组件中仅适用于最后一行
【发布时间】：2020-03-28 10:47:24
【问题描述】：

我试图打印在 inputText 中输入的值，但它只显示 0 除了最后一行显示正确的值！这是一个最小的代码（我没有包括所有的字段和 getter/setter）

@ManagedBean(name="medicament")
@ViewScoped
public class MedicamentBean {
  private List<Medicament> medicaments;
  private String libelle;
  private int qte_vente;

  public void test() {
    System.out.println(this.qte_vente);
}
}

html:

<h:form>
<p:dataTable value ="#{medicament.medicaments}" var ="m">
   <p:column headerText="libelle">      
      <h:outputText value = "#{m.libelle}"/>
   </p:column>
<p:column headerText="qte">
    <h:inputText value ="#{medicament.qte_vente}" onkeyup="myCommand();"/>
    <p:remoteCommand name="myCommand" actionListener="#{medicament.test()}"  style="display: none;" 
 />
   </p:column>

</p:dataTable>
</h:form>

【问题讨论】：

标签： jsf primefaces datatable remotecommand

【解决方案1】：

在浏览器中打开网页。右键单击并选择查看页面源代码。仔细查看您在那里看到的生成的 HTML 输出。当您有 10 个表格行时，例如p:datatable，应该是这个样子

<table>
    <tr><td><script>function myCommand() { /* ... */ }</script></td></tr>
    <tr><td><script>function myCommand() { /* ... */ }</script></td></tr>
    <tr><td><script>function myCommand() { /* ... */ }</script></td></tr>
    <tr><td><script>function myCommand() { /* ... */ }</script></td></tr>
    <tr><td><script>function myCommand() { /* ... */ }</script></td></tr>
    <tr><td><script>function myCommand() { /* ... */ }</script></td></tr>
    <tr><td><script>function myCommand() { /* ... */ }</script></td></tr>
    <tr><td><script>function myCommand() { /* ... */ }</script></td></tr>
    <tr><td><script>function myCommand() { /* ... */ }</script></td></tr>
    <tr><td><script>function myCommand() { /* ... */ }</script></td></tr>
</table>

（当您使用不同的迭代组件，如 p:datagrid 或什至类似 ui:repeat 时，它看起来不同，但通用的“重复”是相同的）

猜猜当你在 JavaScript 中执行 myCommand() 时会调用哪一个 ...

好吧，那行不通。

它只适用于一个<p:remoteCommand> 在<p:dataTable> 到你pass a parameter，这是一个通用解决方案的所有类型的迭代组件。

但在您的情况下，您实际上使事情过于复杂。只需改用<p:ajax>。

<h:inputText ...>
    <p:ajax event="keyup" listener="#{medicament.test()}" />
</h:inputText>

就是这样。

【讨论】：