像p：dataTable这样的迭代组件中的p：remoteCommand仅适用于最后一行 [英] p:remoteCommand inside iterating component like p:dataTable only works for last row

问题描述

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

i was trying to print the value entered in the inputText but it only shows 0 except for the last row it shows the right value! here's a minimal code (i didn't include all the fields and the getters/setters)

@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>

推荐答案

在webbrowser中打开网页。右键单击并选择查看页面源。仔细查看在此处看到的生成的HTML输出。当您有10个表格行时 p：datatable ，它应该看起来像这样

Open the webpage in webbrowser. Rightclick and choose View Page Source. Look carefully at the generated HTML output which you see there. When you have 10 table rows in e.g. p:datatable, it should look something like this

<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 的东西，但外观不同，但通用的重复是相同的）

(When you use a different iterating component like a p:datagrid or even something like a ui:repeat it looks different but the generic 'repeating' is the same)

猜猜当您在JavaScript中执行 myCommand（）时会调用哪个...

Guess which one gets invoked when you execute myCommand() in JavaScript ...

对，

它只能使用一个< p：remoteCommand> 外部 < p：dataTable> to-premotecommand-from-javascript>传递参数，它是各种迭代组件的通用解决方案。

It would have worked with only one <p:remoteCommand> outside the <p:dataTable> to which you pass a parameter, which is a generic solution for all sorts of iterating components.

但是在您的情况下，实际上使事情复杂化了。只需使用< p：ajax> 即可。

But in your case you are in fact overcomplicating things. Just use <p:ajax> instead.

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

仅此而已。

这篇关于像p：dataTable这样的迭代组件中的p：remoteCommand仅适用于最后一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！