Primefaces datatable roweditor：只允許一行編輯

我正在使用JSF 2.1.6和Primefaces 3.4.1，我有一個問題。Primefaces datatable roweditor：只允許一行編輯

我有一個可編輯的數據表與行編輯器。您可以單擊每行的鉛筆按鈕，並且該行將是可編輯的。但是默認情況下可以點擊很多鉛筆按鈕，因此很多行都是可編輯的。

但我只想在編輯模式下的一行。

這是我的代碼示例：

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

我已經封裝在一個命令鏈接部件行編輯器組件，因爲現在我可以單擊行的編輯器時添加JavaScript代碼。

我已經嘗試添加這段JavaScript代碼到commandLink：

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

但是，這創造了這麼多的遞歸，而不是作品。

行編輯器有三個跨度鏈接：一個用於打開編輯模式（ui-icon-pencil），另一個用於保存版本（ui-icon-check）和其他取消版本（ui-icon-關）。 Ther是用於保存（rowEdit）的ajax事件，以及用於取消的其他事件（rowEditCancel）。

Files其中編輯模式沒有被激活，該行編輯跨越這樣的：

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

在哪裏編輯模式被激活的行編輯文件跨越這樣的：

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

那麼，如何我可以只點擊編輯模式被激活的行嗎？或者有一個函數或屬性只允許編輯模式下的一行？如果跨度顯示爲內聯，而不是其他顯示不顯示，那麼我可以只使用jQuery來使用帶有圖標ui-icon-close的跨度進行點擊嗎？

更新：解決方案我發現

我剛剛發現了一個自制的解決方案。這是：我已經添加了onstart函數的鏈接，但這會產生性能問題：它被稱爲保存，編輯和取消。而且我還更改了添加行按鈕的未完成功能。

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

更新2：最後，我找到了解決性能問題。我的問題是，單擊以編輯，保存和取消行版本時調用了Javascript操作。爲了防止這種情況發生，我將onstart函數更改爲onclick函數，僅在單擊編輯行按鈕（鉛筆圖標）時纔將其他行更改爲不可編輯。要做到這一點，我使用event.target，知道點擊了什麼元素。作爲行編輯，行編輯保存和行編輯取消按鈕具有不同的類（ui-icon-pencil，ui-icon-check和ui-icon-close），您可以區分哪個按鈕被按下。因此，這是替換的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;"

來源

2013-10-15 Víctor Pariente

我剛剛發現了一個自制的解決方案，但我認爲這是一個拙劣的一些工作。 –

我已將此解決方案添加到問題中。 –

我已經添加了其他解決方案來改善其他問題。 –

上述解決方案不適用於我。作爲一個解決方案可選擇性，我只是隱藏編輯按鈕（鉛筆）當我編輯一行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')});"/>

來源

2015-07-14 07:56:03

太棒了，謝謝。 – Kawu

。

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

來源

2013-11-19 16:04:06 Xs10tial

Primefaces datatable roweditor：只允許一行編輯

回答

相關問題