如何在 JSF 中的表中动态添加行？

Question

在我的应用程序中，我需要单击按钮添加一行，并且该按钮将位于所有行中。需要帮助来做到这一点吗？

项目类

public class Item {
 public Item()
{

}
private String value;
public Item(String value) { this.value = value; }
public void setValue(String value) { this.value = value; }
public String getValue() { return value; }
}

管理 Bean 类

public class MyMB 
{
private List<Item> list;    

public void addItem() { // JSF action method
    list.add(new Item("Default"));
    Iterator<Item> iterator = list.iterator();
    while(iterator.hasNext())
    {
        Item item = (Item)iterator.next();
        System.out.println(item.getValue());
    }
    System.out.println();
    }
/**
 * @return the list
 */
public List<Item> getList() {
    if(list==null)
    {
        loadList();
    }
    return list;
}
private void loadList() {
    list = new ArrayList<Item>();
    list.add(new Item("Data"));
}

}

JSF 代码

<h:form>
   <rich:dataTable value="#{myMB.list}" var="item" id="tabel">
    <h:column><h:inputText value="#{item.value}" /></h:column>
    <h:column><a4j:commandButton value="Add"  actionListener="#{myMB.addItem}" reRender="tabel"/></h:column>

Answer 1

您所需要做的基本上只是将一个空对象添加到 h:dataTable 的 value 属性后面的数据模型中。

但在后续请求中也需要保留相同的空行。如果支持 bean 是请求范围的，则数据模型将重新加载，而不会出现空行。当 bean 处于会话范围内时，这一切都应该起作用。

此外，您的 JSF 代码中存在多个错误。缺少 h:dataTable var 属性，并且列内容需要位于 h:column 内。

<h:form>
    <h:dataTable value="#{bean.list}" var="item">
        <h:column><h:inputText value="#{item.value}" /></h:column>
    </h:dataTable>
    <h:commandButton value="Add" action="#{bean.add}"/>
</h:form>

会话或视图作用域 bean 可以如下所示：

public class Bean {
    private List<Item> list;

    public Bean() {
        list = new ArrayList<Item>();
    }

    public void add() {
        list.add(new Item());
    }

    public List<Item> getList() {
        return list;
    }
}

Item 类当然应该有一个默认的无参数构造函数。通常这已经隐式可用，但如果您使用参数定义自己的构造函数，则它不再可用。您需要显式定义它，否则您将无法再执行 Item item = new Item(); 。

public class Item {

    private String value;

    public Item() {
        // Keep default constructor alive.
    }

    public Item(String value) {
        this.value = value;
    }

    // ...
}

如果您希望将 bean 保留在请求范围中，那么您需要维护新添加的项目的数量，以便 bean 可以在加载时保留相同的数量。

public class Bean {
    private List<Item> list;
    private HtmlInputHidden count = new HtmlInputHidden();

    public Bean() {
        count.setValue(0);
    }

    public void add() {
        list.add(new Item());
    }

    public List<Item> getList() {
        if (list == null) loadList();
        return list;
    }

    public HtmlInputHidden getCount() {
        return count;
    }

    public void setCount(HtmlInputHidden count) {
        this.count = count;
    }

    private void loadList() {
        list = new ArrayList<Item>();

        // Preserve list with newly added items.
        for (int i = 0; i < (Integer) count.getValue(); i++) {
            list.add(new Item());
        }
    }
}

您只需将以下内容添加到 JSF 页面的 中：

<h:inputHidden binding="#{bean.count}" converter="javax.faces.Integer" />

有关以任何方式使用数据表的更多见解，您可能会发现本文很有用：使用数据表。它还包含一个 WAR 文件，其中包含请求和会话范围内的大量示例。

Answer 2

以此表为例：

<h:datatable value="#{myBean.list}" ...>
    ...
    <h:column>
       <h:commandButton value="Add a row" action="#{myBean.addRow}"/>
    </h:column>
</h:datatable>

myBean.addRow 方法将简单地在列表中添加一个新元素：

public class MyBean {

    private List<SomeClass> list;

    ...

    public List<SomeClass> getList() {
        return list;
    }

    public void addRow() {
        list.add(new SomeClass());
    }
}

当您单击按钮时，addRow 方法将添加一个列表中的新元素。该页面将刷新并显示带有新行的表格。

编辑：

关于您的帖子版本，三件事：

第 1 点：您能否附上错误的堆栈跟踪？

第 2 点： 您的方法 addRow 返回一个 String，它是 JSF 用于导航的 ID。由于此操作不涉及任何导航（即用户停留在同一页面上），因此只需返回 null 或 ""：

public String addRow() {
    list.add(new Item("new data"));
    return null;
}

第 3 点：我建议您的类 Item 提供一个空的构造函数（除了您当前的构造函数之外）：

public Item() {
}