Primefaces datatable roweditor：1行の編集のみを許可します

Question

私はJSF 2.1.6とPrimefaces 3.4.1で作業しています。質問があります。

私は行エディタで編集可能なデータテーブルを持っています。各行の鉛筆ボタンをクリックすると、その行が編集可能になります。 しかし、デフォルトでは多くの鉛筆ボタンをクリックすることができます。そのため、多くの行が編集可能です。

しかし、私は編集モードでは1つの行だけを必要とします。

これは私のコードのサンプルです：

<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のコードを追加することができますので、私は、コマンドリンク・コンポーネントの行エディタコンポーネントをカプセル化してきました。

私に、commandLinkに、このJavaScriptコードを追加しようとしました：

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は、保存するためのajaxイベント（rowEdit）、キャンセルするための他のイベント（rowEditCancel）です。編集モードが起動されていない

ファイルは、行エディタは次のようにまたがる：

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

をだから、どのように編集モードが有効になっている行だけをクリックできますか？または、編集モードで1つの行のみを許可する関数またはプロパティがありますか？ jQueryでスパンのアイコンui-icon-closeをクリックするだけで、そのスパンに表示がインラインで、表示されていないスパンがない場合はクリックできますか？

更新：ソリューション私はちょうど自家製解決策を見つけた

を発見しました。ここにあります： リンクにonstart関数を追加しましたが、パフォーマンスの問題が発生します。保存、編集、キャンセルの両方が呼び出されます。また、行追加ボタンのoncomplete機能を変更しました。

<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アクションが呼び出されたことでした。これを防ぐために、オンスタート関数をonclick関数に変更して、行の編集ボタン（鉛筆アイコン）をクリックしたときにのみ他の行を編集不可能に変更しました。これを行うために、どの要素がクリックされたのかを知るためにevent.targetを使用します。行編集、行編集保存、行編集キャンセルボタンには異なるクラス（UIアイコン鉛筆、UIアイコンチェック、UIアイコン閉じる）がありますので、どのボタンが押されたのかを区別することができます。

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

上記の解決策は私のためには機能しません。 alternativソリューションとして、私はちょうど私が私がちょうど自家製解決策を見つけた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

あなたは要素を反復処理し、他の編集をキャンセルする必要があります。これはONSTART機能を置き換える機能です。

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