Primefaces：数据表清除/重置行数据不起作用

Question

我正在尝试使用 java 脚本清除数据表行内的输入数据。

这是我的 jsf 代码。

<p:dataTable var="line" id="addExpenseDataTable" rowIndexVar="row" value="#{myexpense.form.addExpenseEntryList}">
                    <p:column  styleClass="centerAlignColumn" width="5%">
                        <p:commandButton id="copy" onclick="copy('#{row}');" partialSubmit="true" ajax="true" title="Copy" icon="ui-icon-copy" rendered="#{row==1 || row==0 }"/>
                        <p:commandButton id="clear" onclick="clearMe('#{row}');" immediate="true" partialSubmit="true" ajax="true" title="Clear" icon="ui-icon-close"/>
                    </p:column>
                    <p:column headerText="#{tk.expense_table_expenseOccurredDate}"
                        styleClass="centerAlignColumn" width="8%">
                        <p:calendar id="mask1" value="#{line.expenseOccurredDate}"
                            required="#{not empty line.amount or not empty line.activityId or not empty line.vatAmount or not empty line.comment or not empty line.expenseType}"
                            requiredMessage="#{tk.expense_table_mandatory_expenseOccurredDate}"
                            label="#{tk.expense_table_expenseOccurredDate}"
                            pattern="#{myexpense.datePattern}" styleClass="expenseDate"
                            timeZone="#{myexpense.timeZone}" locale="#{localeBean.locale}"
                            rendered="#{line.editable}"
                            mindate="#{myexpense.minimumFromDate}"
                            maxdate="#{myexpense.maxExpenseOccurredDate}">
                            <f:validator validatorId="dateRangeValidator"></f:validator>
                            <f:attribute name="localeCode" value="#{localeBean.localeCode}" />
                            <p:ajax event="dateSelect" oncomplete="document.getElementById('myExpenseForm:addExpenseDataTable:#{row}:mask1_input').focus()"
                                process="@this" partialSubmit="true"/>
                        </p:calendar>
                    </p:column>
                    <p:column headerText="#{tk.expense_table_activityId}"
                        styleClass="centerAlignColumn">
                        <p:selectOneMenu value="#{line.activityId}"
                            filter="true" filterMatchMode="contains"
                            required="#{not empty line.expenseOccurredDate or not empty line.amount or not empty line.vatAmount or not empty line.comment or not empty line.expenseType}"
                            requiredMessage="#{tk.expense_table_mandatory_activityId}"
                            rendered="#{line.editable}" id="activityId1">
                            <f:selectItem itemLabel="#{tk.expense_table_select_activityId}" />
                            <f:selectItems value="#{myexpense.activityList}" />
                            <p:ajax process="@this" partialSubmit="true" />
                        </p:selectOneMenu>
                    </p:column>
                    <p:column headerText="#{tk.expense_table_comment}"
                        styleClass="centerAlignColumn">
                        <p:inputTextarea rows="2" cols="25" counter="display"
                            value="#{line.comment}" rendered="#{line.editable}" id="comment1"
                            maxlength="#{myexpense.maxCommentLength}"
                            counterTemplate="#{tk.expense_text_area_content_template}"
                            autoResize="false">
                            <p:ajax process="@this" partialSubmit="true"/>
                        </p:inputTextarea>
                        <h:outputText id="display" />
                    </p:column>
                    <p:column headerText="#{tk.expense_table_amount_excl}"
                        styleClass="centerAlignColumn" width="10%">
                        <pe:inputNumber id="amountExcl1" value="#{line.amount}"
                            rendered="#{line.editable}"
                            required="#{not empty line.expenseOccurredDate or not empty line.vatAmount or not empty line.comment or not empty line.expenseType or not empty line.activityId}"
                            requiredMessage="#{tk.expense_table_mandatory_amount}">
                            <p:ajax event="blur" update="amountIncl1"/>  
                        </pe:inputNumber>
                    </p:column>
                    <p:column headerText="#{tk.expense_table_vatAmount}"
                        styleClass="centerAlignColumn" width="10%">
                        <pe:inputNumber id="vat1" value="#{line.vatAmount}"
                            rendered="#{line.editable}">
                            <p:ajax event="blur" update="amountIncl1"/>  
                        </pe:inputNumber>
                    </p:column>
                    <p:column headerText="#{tk.expense_table_amount_incl}"
                        styleClass="rightAlignColumn" width="10%">
                        <h:outputText id="amountIncl1" value="#{line.amount+line.vatAmount}">
                            <f:convertNumber pattern="#{myexpense.numberPattern}" locale="#{localeBean.localeCode}"/>
                        </h:outputText>
                        <h:outputText escape="false" value=" #{tk.menu_currency_symbol}" />
                    </p:column>
                    <p:column headerText="#{tk.expense_table_expenseTypeList}"
                        styleClass="centerAlignColumn">
                        <p:selectOneMenu value="#{line.expenseType}" id="expenseType1"
                            required="#{not empty line.expenseOccurredDate or not empty line.amount or not empty line.comment or not empty line.vatAmount or not empty line.activityId}"
                            requiredMessage="#{tk.expense_table_mandatory_expenseType}">
                            <f:selectItem itemLabel="#{tk.expense_table_select_expenseType}" />
                            <f:selectItems value="#{applicationController.expenseTypeList}" />
                            <p:ajax process="@this" partialSubmit="true"/>
                        </p:selectOneMenu>
                    </p:column>
                    <p:column headerText="#{tk.expense_table_statusList}"
                        styleClass="centerAlignColumn" width="7%">
                        <h:outputText value="#{line.status}" />
                    </p:column>
                    <f:facet name="footer">
                        <p:commandButton process=":myExpenseForm:lazyDataTable addExpenseDataTable" partialSubmit="true"  ajax="true"
                            value="#{tk.expense_saveAsDraft}" id="xyz"
                            actionListener="#{myexpense.saveAsDraft}" update=":myExpenseForm:lazyDataTable addExpenseDataTable @form"
                            rendered="#{myexpense.form.myOnly and myexpense.userIdSearch eq null}" />
                        <p:commandButton process=":myExpenseForm:lazyDataTable addExpenseDataTable" value="#{tk.expense_submit}" partialSubmit="true"  ajax="true"
                            id="a07" actionListener="#{myexpense.submitNotSavedBody}"
                            update=":myExpenseForm:lazyDataTable addExpenseDataTable @form :myExpenseForm:selectUser" rendered="#{myexpense.form.myOnly}" />
                    </f:facet>
                </p:dataTable>

这是我用于清除/重置数据的 java 脚本。

function clearMe(rowIndex){
    //alert(rowIndex);
    document.getElementById('myExpenseForm:addExpenseDataTable:'+rowIndex+':mask1_input').value = "";
    document.getElementById('myExpenseForm:addExpenseDataTable:'+rowIndex+':comment1').value="";
    document.getElementById('myExpenseForm:addExpenseDataTable:'+rowIndex+':amountExcl1_input').value="";
    document.getElementById('myExpenseForm:addExpenseDataTable:'+rowIndex+':amountExcl1_hinput').value="";
    document.getElementById('myExpenseForm:addExpenseDataTable:'+rowIndex+':vat1_input').value="";
    document.getElementById('myExpenseForm:addExpenseDataTable:'+rowIndex+':vat1_hinput').value="";
    var activityIdValue = '';
    var expenseTypeValue = '';
    document.getElementById('myExpenseForm:addExpenseDataTable:'+rowIndex+':activityId1_input').value = activityIdValue;
    document.getElementById('myExpenseForm:addExpenseDataTable:'+rowIndex+':expenseType1_input').value = expenseTypeValue;  
}

问题是，当我放置费用OccurredDate 并单击 UI 上的清除按钮时，该值消失了。但是，当我单击另存为草稿/提交按钮时，会出现费用发生日期。需要多次点击清除按钮才能正常工作。这个问题的根本原因是什么？我该如何解决这个问题？

这是点击清除按钮后的截图。

我需要点击两次清除按钮才能正常工作。

我正在使用 Primefaces 5.2

Answer 1

我该如何解决这个问题？

我在 selectOneMenu 中使用了 widgetVar。

<p:selectOneMenu value="#{line.activityId}"
                            widgetVar="activityId_#{row}"
                            filter="true" filterMatchMode="contains"
                            required="#{not empty line.expenseOccurredDate or not empty line.amount or not empty line.vatAmount or not empty line.comment or not empty line.expenseType}"
                            requiredMessage="#{tk.expense_table_mandatory_activityId}"
                            rendered="#{line.editable}" id="activityId1">
                            <f:selectItem itemLabel="#{tk.expense_table_select_activityId}" />
                            <f:selectItems value="#{myexpense.activityList}" />
                            <p:ajax process="@this" partialSubmit="true" />
                        </p:selectOneMenu>


<p:selectOneMenu value="#{line.expenseType}" id="expenseType1"
                            widgetVar="expenseType_#{row}"
                            required="#{not empty line.expenseOccurredDate or not empty line.amount or not empty line.comment or not empty line.vatAmount or not empty line.activityId}"
                            requiredMessage="#{tk.expense_table_mandatory_expenseType}">
                            <f:selectItem itemLabel="#{tk.expense_table_select_expenseType}" />
                            <f:selectItems value="#{applicationController.expenseTypeList}" />
                            <p:ajax process="@this" partialSubmit="true"/>
                        </p:selectOneMenu>

在我添加的js中：

PF('activityId_'+rowIndex).refresh();
PF('expenseType_'+rowIndex).refresh();

现在它看起来像预期的那样工作。