Primefaces datatable roweditor: sadece bir satır düzenlemesine izin ver

Question

JSF 2.1.6 ve Primefaces 3.4.1 ile çalışıyorum ve bir sorum var.

Satır düzenleyiciyle düzenlenebilir bir veritabam var. Her satırın kalem düğmesini tıklayabilir ve satır düzenlenebilir. Ancak, varsayılan olarak birçok kalem düğmesini tıklatmanız mümkün ve bu nedenle birçok satır düzenlenebilir.

Ancak düzenleme modunda yalnızca bir satır istiyorum. Satır editörü tıklandığında şimdi JavaScript kod ekleyebilirsiniz çünkü bir komut bağlantı bileşeninde satır editörü bileşeni kapsüllü ettik

<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" /> 

:

Bu

benim kod örneğidir.

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

Ama bu kadar çok Rekursif değil çalışmalar oluşturmak:

Ben commandLink bu JavaScript kod ekleyerek denedim

.

Satır editörü üç tane açıklıklı bağlantıya sahiptir: biri düzenleme modunu (ui-simge-kalem) açmak, diğeri baskıyı (ui-simge denetimi) ve baskıyı iptal eden diğer (ui-simge-) kapat). Ther, kaydetme (rowEdit) için bir ajax olayı ve iptal etmek için başka bir olay (rowEditCancel). düzenleme modu aktif olmadığı

Dosyalar, sıra editör böyle yayılan:

<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> 

Ve düzenleme modu satır editörü etkinleştirildiğinde dosyalar bu gibi yayılan:

<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> 

Peki, nasıl Düzenleme modunun aktif olduğu satırları tıklayabilir miyim? Veya düzenleme modunda sadece bir satırın izin vermesi için bir işlev veya özellik var mı? Sadece bu ekranın satır içi görüntülenmesiyle, simge ui-simge-close ile açıklıkları jQuery ile tıklayabilir miyim?

Güncelleme: Çözüm ben sadece bir ev yapımı çözüm buldum

Bulunan var. İşte burada: Bağlantıya bir başlatma işlevi ekledim, ancak bu bir performans sorunu yaratıyor: hem kaydetme, düzenleme, hem de iptal etme olarak adlandırılıyor. Ayrıca, satır ekleme düğmesinin tamamlanmamış işlevini de değiştirdim.

<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" /> 

Güncelleme-2: Sonunda performans sorununa çözüm bulundu. Sorunum, satır baskısını düzenlemek, kaydetmek ve iptal etmek için Javascript eyleminin çağrılmasıydı. Bunu önlemek için, başlatma işlevini, diğer satırları düzenlenebilir olmayan düğüme yalnızca satır düzenleme düğmesini (kalem simgesi) tıklatırken değiştiren bir onclick işlevine değiştirdim. Bunu yapmak için hangi öğenin tıklandığını bilmek için event.target'i kullanıyorum. Satır düzenleme, satır düzenleme ve satır düzenleme iptali gibi farklı sınıflar (ui-simge-kalem, kullanıcı-simge-kontrol ve ui-simge-yakın) vardır, hangi düğmeye basıldığını ayırt edebilirsiniz.

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

Yukarıdaki çözüm benim için çalışmıyor. Bir alternativ çözüm olarak, ben sadece ben sadece bir ev yapımı çözüm buldum 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

Sen öğeleri boyunca yineleme ve diğer tüm düzenlemeleri iptal etmek gerekir: Yani bu onstart işlevi yerine fonksiyonudur.

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