扩展 PrimeFaces 的 DataTable 的行不当行为

Question

我不确定这是否是数据表的行扩展不当行为，还是我做错了什么。我将尽可能简单地描述问题。

首先，尝试制作一个类似于 PrimeFaces 展示柜的 DataTable，例如，您可以在其中“更改”汽车颜色的汽车列表。这很简单！

然后实现其rowExpansion，以便对通过commandButton 设置的属性ActionListener 进行部分处理。到那里为止，一切都很好。所以现在尝试展开最后一行，然后尝试展开中间的行，然后单击第一个展开行的commandButton，然后您会注意到属性ActionListener 将指向或与第二个展开行相关。在我的示例中，我只是用 3 行填充数据表。

如果您尝试仅扩展一行，则会得到预期的行为。

扩展过程似乎覆盖了先前处理的模型或其他某种不属于知识的不当行为。

请参阅以下 sn-ps。

<p:dataTable id="carsTable" var="car" value="#{bean.carsSmall}">
  <p:ajax event="rowToggle" listener="#{bean.onRowToggle}" />
     <p:column style="width:2%">
        <p:rowToggler />
     </p:column>

    <p:column style="width:49%">
      <h:outputText value="#{car.model}" />
    </p:column>

    <p:column style="width:49%">
      <h:outputText value="#{car.year}" />
    </p:column>

    <p:rowExpansion>
       <ui:repeat var="color" value="#{bean.availableColors}">
          <p:commandButton action="#{bean.chooseColor}" value="#{color.color}">
              <f:setPropertyActionListener target="#{bean.selectedColor}" value="#{color}" />
          </p:commandButton>
       </ui:repeat>

    </p:rowExpansion>
</p:dataTable>

豆子

@ManagedBean 
@SessionScoped 
public class Bean implements java.io.Serializable {

    private static final long serialVersionUID = 1708652163041196763L;

    private List<Car> carsSmall = new ArrayList<Car>();
    private final List<Color> availableColors = new ArrayList<Color>();
    private Color selectedColor;

    public Bean() {
        carsSmall.add(new Car("81025d15", "2011"));
        carsSmall.add(new Car("44194657", "2012"));
        carsSmall.add(new Car("482f2a60", "2013"));
    }

    public void clear(){
        this.availableColors.clear();
    }

    public void chooseColor(){
        System.out.println(this.selectedColor.getColor());
    }

    public void onRowToggle(ToggleEvent event) {
        // This is a dummy logic for this example...
        Car car = (Car) event.getData();
        this.availableColors.clear();

        if (car.getModel().equals("81025d15")) {
            this.availableColors.add(new Color("RED"));
            this.availableColors.add(new Color("GREEN"));
            this.availableColors.add(new Color("BLUE"));
        } else if (car.getModel().equals("44194657")) {
            this.availableColors.add(new Color("YELLOW"));
            this.availableColors.add(new Color("GRAY"));
            this.availableColors.add(new Color("BLACK"));
        } else if (car.getModel().equals("482f2a60")) {
            this.availableColors.add(new Color("ORANGE"));
            this.availableColors.add(new Color("BROWN"));
            this.availableColors.add(new Color("PINK"));
        }

    }
    // GETTERS and SETTERS...
}

对于那些指出问题原因的人，我使用的是<ui:repeat>，<h:dataTable> 或 <p:dataTable> 也会注意到这种不当行为

此示例在 bean 设置为既不是 RequestScoped 也不是 ViewScoped 时不起作用。

Answer 1

正如我在PrimeFaces forum: Expanded DataTable's rows misbehavior 中所说的，

简而言之，您的代码按照（您）设计的（它）运行。 :)

我将您的代码下载到我的 PC 上，更改了您的代码，并且预期的行为正常。

为“汽车”添加了可用颜色列表

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package com.rowexpansion;

import java.util.List;

public class Car implements java.io.Serializable {

   private static final long serialVersionUID = 2296448576778208049L;

   private String model;
   private String year;
   private String color;
   private List<Color> availableColors;

   public Car() {
   }

   public Car(String model, String year) {
      super();
      this.model = model;
      this.year = year;
   }

   public String getModel() {
      return model;
   }

   public void setModel(String model) {
      this.model = model;
   }

   public String getYear() {
      return year;
   }

   public void setYear(String year) {
      this.year = year;
   }

   public String getColor() {
      return color;
   }

   public void setColor(String color) {
      this.color = color;
   }

    public List<Color> getAvailableColors() {
        return availableColors;
    }

    public void setAvailableColors(List<Color> availableColors) {
        this.availableColors = availableColors;
    }

}

修改后的 Bean：删除了 'final' List availableColors 和 rowToggler 事件，并在 bean 的构造函数中填充了 Car.availableColors()

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package com.rowexpansion;

import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class Bean implements java.io.Serializable {

   private static final long serialVersionUID = 1708652163041196763L;

   private List<Car> carsSmall = new ArrayList<Car>();
   private Color selectedColor;

   public Bean() {
        List<Color> availableColors;
        carsSmall.add(new Car("81025d15", "2011"));
        availableColors = new ArrayList<Color>();
        availableColors.add(new Color("RED"));
        availableColors.add(new Color("GREEN"));
        availableColors.add(new Color("BLUE"));
        carsSmall.get(0).setAvailableColors(availableColors);

        carsSmall.add(new Car("44194657", "2012"));
        availableColors = new ArrayList<Color>();
        availableColors.add(new Color("YELLOW"));
        availableColors.add(new Color("GRAY"));
        availableColors.add(new Color("BLACK"));
        carsSmall.get(1).setAvailableColors(availableColors);

        carsSmall.add(new Car("482f2a60", "2013"));
        availableColors = new ArrayList<Color>();
        availableColors.add(new Color("ORANGE"));
        availableColors.add(new Color("BROWN"));
        availableColors.add(new Color("PINK"));
        carsSmall.get(2).setAvailableColors(availableColors);
   }

   public void chooseColor(){
      System.out.println(this.selectedColor.getColor());
   }

   public List<Car> getCarsSmall() {
      return carsSmall;
   }

   public void setCarsSmall(List<Car> carsSmall) {
      this.carsSmall = carsSmall;
   }

   public Color getSelectedColor() {
      return selectedColor;
   }

   public void setSelectedColor(Color selectedColor) {
      this.selectedColor = selectedColor;
   }

}

从 xhtml 中移除了 rowToggle AJAX 事件；真的不需要。

<p:ajax event="rowToggle" listener="#{bean.onRowToggle}" />

最后，我将 'bean.availableColors' 更改为 'car.availableColors'

<ui:repeat var="color" value="#{car.availableColors}">
    <p:commandButton action="#{bean.chooseColor}" value="#{color.color}">
        <f:setPropertyActionListener target="#{bean.selectedColor}" value="#{color}" />
     </p:commandButton>
</ui:repeat>