扩展PrimeFaces的DataTable行行为不当 | 扩展PrimeFaces的DataTable行行为不当

本文介绍了扩展PrimeFaces的DataTable行行为不当的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我不知道这是否是datatable的行扩展不当行为，或者我做错了。我将尽可能简单地解决问题的描述。

I'm not sure whether or not this is a datatable's row expansion misbehavior or am I doing something wrong. I'll be as simple as possible with the problem's description.

首先，尝试像PrimeFaces的展示一样创建一个DataTable，其中列出了Car的列表，您可以在其中更改车的颜色。这很简单！

First, try making a DataTable like PrimeFaces's showcase for instance with a list of Car's in which you may "change" car's color. It's simple!

然后实现其 rowExpansion ，以便部分处理属性 ActionListener 通过commandButton设置。直到那里，一切都没事。所以现在尝试扩展最后一行，然后尝试扩展中间的一个，然后单击第一个扩展行的 commandButton ，然后您会注意到属性 ActionListener 集合将被指向或与第二个扩展行相关。在我的例子中，我只是填充datatable的3行。

Then implement its rowExpansion in order to do the partial processing of a property ActionListener set via commandButton. Till there, everything is alright. So now try expand the last row and after that try expanding middle's one then click over commandButton of the first expanded row then you'll notice that the property ActionListener set will be pointed or related to the second expanded row. In my example, I just populate datatable's with 3 rows.

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

If you try to expand only one row you get the expected behavior.

似乎扩展过程覆盖以前的处理模式或某种其他不知情的行为。

It seems that the expansion process overwrite previous processed model or some sort of other misbehavior that's away from knowledge.

查看以下代码段。

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

Bean

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

For those who will point the cause of issue the fact I'm using <ui:repeat>, this misbehavior is also noticed with either <h:dataTable> or <p:dataTable>

此示例不起作用，既不被设置为 RequestScoped 也不是 ViewScoped 。

This example does not function with bean set as neither as RequestScoped nor ViewScoped.

推荐答案

正如我在，

简而言之，您的代码正在（你）设计（它）。：）

In short, your code is working as (you) designed (it). :)

我将您的代码下载到我的电脑，改变了代码，我的预期行为很好。

I downloaded your code to my PC, changed your code, and i got the expected behavior working good.

添加列表availableColors to'Car'

Added List availableColors to 'Car'

/*
 * 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'列出availableColors和rowToggler事件，并在bean的构造函数中填充Car.availableColors（）

Modified Bean: removed 'final' List availableColors and rowToggler event, and populated Car.availableColors() in bean's constructor

/*
 * 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事件;不需要它，真的。

removed the rowToggle AJAX event from xhtml; don't need it, really.

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

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

Last, I changed 'bean.availableColors' to '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>

这篇关于扩展PrimeFaces的DataTable行行为不当的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！