私は 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 コードを追加できるようになったため、行エディター コンポーネントをコマンド リンク コンポーネントにカプセル化しました。
このJavascriptコードをcommandLinkに追加しようとしました:
onclick="$('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-cancel').click()"
しかし、これは非常に多くの再帰を作成し、機能しません。
行エディターには 3 つのスパン リンクがあります。1 つは編集モードを開くため (ui-icon-pencil)、もう 1 つは編集を保存するため (ui-icon-check)、もう 1 つは編集をキャンセルするため (ui-icon-close) です。保存するための 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 行のみを許可する関数またはプロパティはありますか? そのスパンにインライン表示がある場合、アイコンui-icon-closeのスパンのみをjQueryでクリックできますか?表示なしの他のスパンはクリックできませんか?
更新: 私が見つけた解決策
私はちょうど自家製の解決策を見つけました。ここにあります: リンクに 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" />
Update-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;"