Question

我正在使用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函数，但这会产生性能问题：它既可以保存，也可以编辑和取消。而且我也改变了添加行按钮的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操作。为了防止这种情况，我将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;"

Answer 1

以上解决方案对我不起作用。作为一个替代解决方案，我只是在用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

您需要遍历元素，并取消任何其他编辑。

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

Primefaces datatable roweditor：只允许一行编辑

2 个答案: