Primefaces datatable roweditor: consente solo la modifica di una riga

Question

Sto lavorando con JSF 2.1.6 e Primefaces 3.4.1 e ho una domanda.

Ho un datatable modificabile con editor di riga. Puoi fare clic sul pulsante a forma di matita di ogni riga e la riga sarà modificabile. Ma per impostazione predefinita è possibile fare clic su molti pulsanti a forma di matita, e per questo motivo molte righe saranno modificabili.

Ma voglio solo una riga in modalità di modifica.

Questo è un esempio del mio codice:

<p:dataTable value="rows" var="row" editable="true" 
id="myTable" widgetVar="myTableVar" styleClass="myTableStyle"> 

    <p:ajax event="rowEdit" listener="#{myBean.onUpdateRow}" /> 
    <p:ajax event="rowEditCancel" /> 

    <p:columnGroup type="header"> 
     <p:column headerText="Name" /> 
     <p:column headerText="Age" /> 
     ... 
     <p:column headerText="Edit" /> 
    </p:columnGroup> 

    <p:column> 
     <p:cellEditor> 
     <f:facet name="output"> 
       <h:outputText value="#{row.name}" /> 
      </f:facet> 
      <f:facet name="output"> 
       <h:inputText value="#{row.name}" /> 
      </f:facet> 
     </p:cellEditor> 
    </p:column> 

    <p:column> 
     <p:cellEditor> 
     <f:facet name="output"> 
       <h:outputText value="#{row.age}" /> 
      </f:facet> 
      <f:facet name="output"> 
       <h:inputText value="#{row.age}" /> 
      </f:facet> 
     </p:cellEditor> 
    </p:column> 

    ... 

    <p:column> 
     <p:commandLink update="myTable"> 
      <p:rowEditor /> 
     </p:commandLink> 
    </p:column> 

</p:dataTable> 

<p:commandButton icon="ui-icon-plus" action="#{myBean.addNewRow}" update="myTable" 
oncomplete="$('.myTableStyle tbody.ui-datatable-data tr:last-child td span.ui-row-editor span.ui-icon-pencil').click()" 
title="Add new row" /> 

ho incapsulato il componente editor di riga in un componente di collegamento di comando, perché ora posso aggiungere codice Javascript quando si fa clic l'editor fila.

Ho provato ad aggiungere il codice JavaScript al commandLink:

onclick="$('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-cancel').click()" 

Ma questo crea tanta ricorsione e non opere.

L'editor di riga ha tre collegamenti span: uno per aprire la modalità di modifica (ui-icona-matita), altro per salvare l'edizione (ui-icon-check) e altro per annullare l'edizione (ui-icon- vicino). C'è un evento ajax per il salvataggio (rowEdit), e un altro evento per la cancellazione (rowEditCancel).

file in cui la modalità di modifica non è attiva, l'editor fila campate in questo modo:

<span class="ui-icon ui-icon-pencil"></span> 
<span class="ui-icon ui-icon-check" style="display:none"></span> 
<span class="ui-icon ui-icon-close" style="display:none"></span> 

e file in cui la modalità di modifica è attivata l'editor fila campate in questo modo:

<span class="ui-icon ui-icon-pencil" style="display:none"></span> 
<span class="ui-icon ui-icon-check"></span> 
<span class="ui-icon ui-icon-close"></span> 

Quindi, come posso fare clic solo sulle righe in cui è attivata la modalità di modifica? O c'è una funzione o una proprietà per consentire solo una riga in modalità di modifica? Posso cliccare solo con jQuery gli span con l'icona ui-icon-close quando l'intervallo è visualizzato in linea, e non gli altri con display none?

Update: soluzione che ho trovato

ho appena trovato una soluzione fatta in casa. Eccolo: Ho aggiunto una funzione di avvio al collegamento, ma questo genera un problema di prestazioni: è chiamato sia per salvare, modificare e cancellare. E ho anche cambiato la funzione incompleta del pulsante aggiungi riga.

<p:dataTable value="rows" var="row" editable="true" 
id="myTable" widgetVar="myTableVar" styleClass="myTableStyle"> 

    <p:ajax event="rowEdit" listener="#{myBean.onUpdateRow}" /> 
    <p:ajax event="rowEditCancel" /> 

    <p:columnGroup type="header"> 
     <p:column headerText="Name" /> 
     <p:column headerText="Age" /> 
     ... 
     <p:column headerText="Edit" /> 
    </p:columnGroup> 

    <p:column> 
     <p:cellEditor> 
     <f:facet name="output"> 
       <h:outputText value="#{row.name}" /> 
      </f:facet> 
      <f:facet name="output"> 
       <h:inputText value="#{row.name}" /> 
      </f:facet> 
     </p:cellEditor> 
    </p:column> 

    <p:column> 
     <p:cellEditor> 
     <f:facet name="output"> 
       <h:outputText value="#{row.age}" /> 
      </f:facet> 
      <f:facet name="output"> 
       <h:inputText value="#{row.age}" /> 
      </f:facet> 
     </p:cellEditor> 
    </p:column> 

    ... 

    <p:column> 
     <p:commandLink update="myTable" onstart="$('.myTableStyle tbody.ui-datatable-data tr td .ui-cell-editor-input').hide(); $('.myTableStyle tbody.ui-datatable-data tr td .ui-cell-editor-output').show(); $('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-pencil').show(); $('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-check').hide(); $('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-close').hide(); $('.myTableStyle tbody.ui-datatable-data tr').removeClass('ui-state-highlight'); return false;"> 
      <p:rowEditor /> 
     </p:commandLink> 
    </p:column> 

</p:dataTable> 

<p:commandButton icon="ui-icon-plus" action="#{myBean.addNewRow}" update="myTable" 
oncomplete="$('.myTableStyle tbody.ui-datatable-data tr:last-child td .ui-cell-editor-input').show(); $('.myTableStyle tbody.ui-datatable-data tr:last-child td .ui-cell-editor-output').hide(); $('.myTableStyle tbody.ui-datatable-data tr:last-child td span.ui-row-editor span.ui-icon-pencil').hide(); $('.myTableStyle tbody.ui-datatable-data tr:last-child td span.ui-row-editor span.ui-icon-check').show(); $('.myTableStyle tbody.ui-datatable-data tr:last-child td span.ui-row-editor span.ui-icon-close').show(); $('.myTableStyle tbody.ui-datatable-data tr:last-child').addClass('ui-state-highlight'); return false; 
title="Add new row" /> 

Update-2: finalmente ho trovato una soluzione al problema di prestazioni. Il mio problema era che l'azione Javascript è stata chiamata quando si fa clic per modificare, salvare e cancellare l'edizione della riga. Per evitare ciò, ho modificato la funzione di avvio su una funzione onclick che modifica le altre righe in non modificabili solo quando si fa clic sul pulsante di modifica riga (icona a forma di matita). Per farlo uso event.target, per sapere quale elemento ha cliccato. Come modifica riga, il comando modifica riga ed il pulsante Annulla modifica riga ha classi diverse (ui-icona-matita, ui-icona-controllo e ui-icona-chiusura), può essere possibile distinguere quale pulsante è stato premuto. Quindi questa è la funzione che sostituisce la funzione OnStart:

onclick="$(if($(event.target).hasClass('ui-icon-pencil')) {'.myTableStyle tbody.ui-datatable-data tr td .ui-cell-editor-input').hide(); $('.myTableStyle tbody.ui-datatable-data tr td .ui-cell-editor-output').show(); $('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-pencil').show(); $('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-check').hide(); $('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-close').hide(); $('.myTableStyle tbody.ui-datatable-data tr').removeClass('ui-state-highlight');} return false;"

Answer 1

La soluzione di cui sopra non funziona per me. Come soluzione alternativ, ho appena nascondo il pulsante Modifica (matita) quando sto modificando una riga con i CSS

<p:ajax event="rowEditInit" oncomplete="$('.ui-row-editor span.ui-icon-pencil').each(function(){$(this).css('visibility','hidden')});" /> 

<p:ajax event="rowEdit" oncomplete="$('.ui-row-editor span.ui-icon-pencil').each(function(){$(this).css('visibility','visible')});"/> 

<p:ajax event="rowEditCancel" onstart="$('.ui-row-editor span.ui-icon-pencil').each(function(){$(this).css('visibility','visible')});"/> 

Answer 2

È necessario scorrere gli elementi, ed annullare qualsiasi altra modifica.

$('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-cancel').each(function(){ 
    $(this).click(); 
});