如何在p:datatable中将焦点设置为特定的行/列(添加新行时为下一个单元格)?

时间:2019-06-02 10:14:08

标签: jquery jsf primefaces datatables

我有一个“添加”按钮,可在表格底部添加新行。这一切都很好。但是,当用户单击添加时,我想将焦点设置到表底部新行中的第一列。我该怎么做?

我尝试了以下各种语法,但是没有运气。

<p:commandButton id="addDetailButton"  value="#{bundle.Add}" actionListener="#{invoiceController.addInvoiceDetail()}"
                                           oncomplete="PrimeFaces.focus('InvoiceDetails:'+#{invoiceController.selected.invoiceDetails.size()}+':editorProductService')"
        update="InvoiceDetails"  disabled="#{invoiceController.selected.account==null}"/>

using javascript funtion 
 oncomplete="nexts('#{p:component('service')}')"
function nexts(idNext){
     element = document.getElementById(idNext);   
     $(idNext).focus();     
}


 <h:form id="InvoiceCreateForm">                
                <p:dataTable id="InvoiceDetails" var="itemDetails" value="#{invoiceController.selected.invoiceDetails}" editable="true" editMode="cell" widgetVar="cellCars"
                             selection="#{invoiceController.invoiceDetailTmp}" rowKey="#{itemDetails.idTmp}" 
                             sortOrder="ascending" sortBy="#{invoiceController.invoiceDetailTmp.idTmp}" liveScroll="true" 
                             resizableColumns="true" rows="3" scrollable="true" scrollWidth="100%" scrollHeight="60"  >

                    <p:ajax event="rowSelect"   update="addDetailButton  deleteDetailButton"/>
                    <p:ajax event="rowUnselect" update="addDetailButton  deleteDetailButton"/>
                    <p:ajax event="cellEdit" listener="#{invoiceController.processDetail}"  />

                 <p:column id="productService" width="25%" headerText="#{bundle.CreateCustomerTitle_Services}">                                    
                     <p:cellEditor id="editorProductService" >  
                            <f:facet name="output">
                                <p:outputLabel value="#{itemDetails.service.name != null ? itemDetails.service.name : 'seleccione un valor'}" />
                            </f:facet>
                            <f:facet name="input">
                                <p:autoComplete id="service" forceSelection="true" dropdown="false" value="#{itemDetails.service}" 
                                                completeMethod="#{productController.getItemsAvailableSelectManyTop}" var="productItem"
                                                itemValue="#{productItem}" itemLabel="#{productItem.name}" size="28">  
                                </p:autoComplete> 
                            </f:facet> 
                        </p:cellEditor>
                    </p:column>                         
                    <p:column id="unitValue" width="17%" headerText="#{bundle.CreateInvoiceTitle_unitValue}" styleClass="ADA-text-outputText">
                        <p:cellEditor >
                            <f:facet  name="output" >
                                <h:outputText  value="#{itemDetails.unitValue}">
                                    <f:convertNumber  pattern="#{bundle.patternMoneyWithSimbol}" /> 
                                </h:outputText>
                            </f:facet>
                            <f:facet name="input">
                                <p:inputNumber id="precio" value="#{itemDetails.unitValue}" converter="javax.faces.Double" symbol="#{bundle.currencySimbol}" 
                                               thousandSeparator="#{bundle.thousandSeparator}" decimalSeparator="#{bundle.decimalSeparator}"  decimalPlaces="#{bundle.decimalPlaces}" >
                                  <!--  <p:ajax oncomplete="refreshTable();"/>-->
                                </p:inputNumber>
                            </f:facet>
                        </p:cellEditor>
                    </p:column>
                    <p:column id="amount" width="8%" headerText="#{bundle.CreateInvoiceDetailTitle_amount}" styleClass="ADA-text-outputText">                            
                        <p:cellEditor>
                            <f:facet name="output">
                                <h:outputText value="#{itemDetails.amount != null ? itemDetails.amount: '0'}" >
                                    <f:convertNumber  maxFractionDigits="#{bundle.maxFractionDigits}" pattern="#{bundle.patternMoneyWithOutSimbol}"/>
                                </h:outputText>
                            </f:facet>
                            <f:facet name="input">
                                <p:inputNumber value="#{itemDetails.amount}" converter="javax.faces.Double" 
                                               thousandSeparator="#{bundle.thousandSeparator}" decimalSeparator="#{bundle.decimalSeparator}"   decimalPlaces="#{bundle.decimalPlaces}">                                              
                                </p:inputNumber>

                            </f:facet>
                        </p:cellEditor>
                    </p:column>
                    <p:column  width="17%" headerText="#{bundle.CreateInvoiceTitle_totalValue}" styleClass="ADA-text-outputText" >
                        <p:outputLabel value="#{itemDetails.totalValue}">
                            <f:convertNumber type="currency" currencySymbol="#{bundle.currencySimbol}" maxFractionDigits="#{bundle.maxFractionDigits}" pattern="#{bundle.patternMoneyWithSimbol}"/> 
                        </p:outputLabel>
                    </p:column>
                    <p:column  width="15%" headerText="#{bundle.CreateProductTitle_discount}" styleClass="ADA-text-outputText">
                        <p:outputLabel value="#{itemDetails.totalDiscount}">
                            <f:convertNumber type="currency" currencySymbol="#{bundle.currencySimbol}" maxFractionDigits="#{bundle.maxFractionDigits}" pattern="#{bundle.patternMoneyWithSimbol}"/> 
                        </p:outputLabel>
                    </p:column>    
                    <p:column  width="12%" headerText="#{bundle.CreateProductTitle_tax}" styleClass="ADA-text-outputText">
                        <p:outputLabel value="#{itemDetails.totalTax}">
                            <f:convertNumber type="currency" currencySymbol="#{bundle.currencySimbol}" maxFractionDigits="#{bundle.maxFractionDigits}" pattern="#{bundle.patternMoneyWithSimbol}"/> 
                        </p:outputLabel>
                    </p:column>                          
                    <p:column  width="6%" headerText="#{bundle.CreateDiaryLabel_ciclic_billing}"  >
                        <p:selectBooleanCheckbox id="ciclicBilling" value="#{itemDetails.ciclicBilling}" style="text-align: center"/> 
                    </p:column>
                   <f:facet name="footer">                       

               <!--        <p:commandButton id="addDetailButton" icon="ui-icon-plus" value="#{bundle.Add}" actionListener="#{invoiceController.addInvoiceDetail()}" 
                                           oncomplete="PrimeFaces.focus('InvoiceDetails:'+#{invoiceController.selected.invoiceDetails.size()}+':editorProductService')"
        update="InvoiceDetails"  disabled="#{invoiceController.selected.account==null}"/>-->

                          <p:commandButton id="addDetailButton" icon="ui-icon-plus" value="#{bundle.Add}" actionListener="#{invoiceController.addInvoiceDetail()}" 
                                           oncomplete="nexts('#{p:component('service')}')"
        update="InvoiceDetails"  disabled="#{invoiceController.selected.account==null}"/>


                        <p:commandButton id="deleteDetailButton" icon="ui-icon-trash"  value="#{bundle.Delete}" actionListener="#{invoiceController.removeDetail()}" 
                                         update="InvoiceDetails,:InvoiceCreateForm:totals,:InvoiceCreateForm:neto" 
                                         disabled="#{empty invoiceController.invoiceDetailTmp}" immediate="true"/>

                        </f:facet>
                </p:dataTable>
            </h:form>

我想在用户完成当前单元格的编辑时将焦点设置到下一个单元格,即使添加了下一个rew也是如此。

我没有任何错误,但是没有用。

0 个答案:

没有答案