我有一个可编辑的数据表与行编辑器.您可以单击每行的铅笔按钮,该行将可编辑.
但是默认情况下可以点击许多铅笔按钮,因此很多行都可以编辑.

但是我只需要在编辑模式下一行.

这是我的代码示例：

<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是一个用于保存(a)的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函数到链接,但这会产生一个性能问题：它被称为保存,编辑和取消.而且我也改变了添加行按钮的不完整功能.

<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-行编辑器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;“