Перформанс datatable roweditor: разрешает только редактирование одной строки

Я работаю с JSF 2.1.6 и Primefaces 3.4.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()"

Но это создает так много рекурсии, а не работает.

Редактор строк имеет три строки: один для открытия режима редактирования (ui-icon-pencil), другой - сохранение версии (ui-icon-check) и другие, которые отменяют выпуск (ui-icon-close). 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>

Итак, как я могу щелкнуть только строки, в которых активирован режим редактирования? Или есть функция или свойство, позволяющие разрешить только одну строку в режиме редактирования? Могу ли я щелкнуть только с jQuery с помощью значка ui-icon-close, когда этот диапазон имеет встроенный дисплей, а не другие с дисплеем?

Обновление: решение, которое я нашел

Я только что нашел домашнее решение. Вот: Я добавил функцию onstart в ссылку, но это создает проблему с производительностью: она называется как для сохранения, редактирования, так и для отмены. А также я изменил неполную функцию кнопки add row.

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