如何在rich:datatable中添加多行，当手动单击add new Button时

Question

我正在设计一个网页，其中有一个丰富的:DataTable，我用来在数据库中添加新的客户信息。

因此，每次单击"添加新"按钮时，应该在具有空白输入文本字段的富数据表中出现新行。

问题:即使我点击了多少次"添加新"按钮，表中仍然只有一行。

下面是我的网页代码:

<a4j:outputPanel id="rep" rendered="#{adminBean.currentItem == 'Participant' || adminBean.currentItem == 'Administrator'}">
    <rich:panel rendered="#{not empty adminBean.currentItem}" header="Add Customer" id="out">
        <h:panelGrid columns="2">
            <h:commandButton value="Add New" type="button" style="width: 70px" actionListener="#{adminBean.addCustAction}">
                <a4j:ajax  render="out"/>
            </h:commandButton>
            <a4j:commandButton value="Delete" style="margin-left: 10px; width: 70px"></a4j:commandButton>
        </h:panelGrid>
        <rich:dataScroller for="setcust" style="margin-top: 17px"></rich:dataScroller>
        <rich:dataTable id="setcust" value="#{adminBean.customerList}" var="custl" rows="10" style="width: 900px;margin-top: 5px">
            <rich:column id="col1">
                <f:facet name="header">
                    <h:outputText value="Customer ID" style="font-size: smaller; font-weight: bolder; "/>
                </f:facet>
                <h:inputText value="#{custl.Id}"></h:inputText>
            </rich:column>
            <rich:column id="col2">
                <f:facet name="header">
                    <h:outputText value="First Name" style="font-size: smaller; font-weight: bolder;"/>
                </f:facet>
                <h:inputText value="#{custl.FirstName}"></h:inputText>
            </rich:column>
            <rich:column id="col3">
                <f:facet name="header">
                    <h:outputText value="Last Name" style="font-size: smaller; font-weight: bolder;"/>
                </f:facet>
                <h:inputText value="#{custl.lastName}"></h:inputText>
            </rich:column>
            <rich:column id="col4">
                <f:facet name="header">
                    <h:outputText value="Phone" style="font-size: smaller; font-weight: bolder;"/>
                </f:facet>
                <h:inputText value="#{custl.phoneNo}"></h:inputText>
            </rich:column>
            <rich:column id="col5">
                <f:facet name="header">
                    <h:outputText value="Address" style="font-size: smaller; font-weight: bolder;"/>
                </f:facet>
                <h:inputText value="#{custl.address}"></h:inputText>
            </rich:column>
            <rich:column id="col6">
                <f:facet name="header">
                    <h:outputText value="City" style="font-size: smaller; font-weight: bolder;"/>
                </f:facet>
                <h:inputText value="#{custl.city}"></h:inputText>
            </rich:column>
            <rich:column id="col7">
                <f:facet name="header">
                    <h:outputText value="Email" style="font-size: smaller; font-weight: bolder;"/>
                </f:facet>
                <h:inputText value="#{custl.email}"></h:inputText>
            </rich:column>
        </rich:dataTable>
    </rich:panel>
</a4j:outputPanel>

下面是AdminBean的代码:

@ManagedBean
@ViewScoped
public class AdminBean {
    private String currentType;
    private String currentItem;
    private List<Customer> customerList = new ArrayList<Customer>();
    private List<Account> accountList;
    private List optionList;
    public List getOptionList() {
        optionList = new ArrayList<String>();
        if (currentType.equals("Add New User")) {
            optionList.add("Participant");
            optionList.add("Administrator");
        } else if (currentType.equalsIgnoreCase("Manage Balance")) {
            optionList.add("Withdrawl");
            optionList.add("Deposit");
        }
        return optionList;
    }
    public void setOptionList(List optionList) {
        this.optionList = optionList;
    }
    public List<Account> getAccountList() {
        return accountList;
    }
    public void setAccountList(List<Account> accountList) {
        this.accountList = accountList;
    }
    public List<Customer> getCustomerList() {
        System.out.println("got list..................");
        return customerList;
    }
    public void setCustomerList(List<Customer> customerList) {
        this.customerList = customerList;
    }
    public String getCurrentItem() {
        return currentItem;
    }
    public void setCurrentItem(String currentItem) {
        this.currentItem = currentItem;
    }
    public String getCurrentType() {
        return currentType;
    }
    public void setCurrentType(String currentType) {
        this.currentType = currentType;
    }
    public void addCustAction(){
        System.out.println("kshitij jain.......actionListener"+customerList.size());
        Customer cust = new Customer();
        customerList.add(cust);
    }
}

Answer 1

你的代码有一些问题:

• 为了工作，每个UICommand都应该包裹在<h:form>中。请参考commandButton/commandLink/ajax action/listener方法未调用或输入值未更新，第1节。
• 您没有以正确的方式声明actionListener方法，该方法需要ActionEvent event参数。看起来你想用action代替。更多信息请参考action和actionListener的区别。
在RichFaces 4中，没有必要将<h:commandButon>与<a4j:ajax>一起使用，这是<a4j:commandButton>的目的。从文档来看:

该组件类似于JavaServer Faces (JSF)组件，但额外包括Ajax支持。

将所有这些建议结合在一起，您的JSF代码应该是(我省略了测试结果(如样式和呈现条件)的不必要代码)

<a4j:outputPanel id="rep" >
    <rich:panel id="out">
        <h:form id="frmCustomerData">
            <h:panelGrid columns="2">
                <a4j:commandButton value="Add New"
                    action="#{adminBean.addCustAction}"
                    render="setcust" />
                <a4j:commandButton value="Delete" />
            </h:panelGrid>
            <rich:dataScroller for="setcust" style="margin-top: 17px"></rich:dataScroller>
            <rich:dataTable id="setcust" value="adminBean.customerList" var="custl" rows="10" style="width: 900px;margin-top: 5px">
                <!-- datatable content... -->
            </rich:dataTable>
        </h:form>
    </rich:panel>
</a4j:outputPanel>

不需要在托管bean上做任何更改。