我正在使用JSF 2.1.6和Primefaces 3.4.1,我有一个问题。
我有一个带有行编辑器的可编辑datatable。您可以单击每行的铅笔按钮,该行将处于可编辑状态。但在默认情况下,可以单击许多铅笔按钮,因此许多行将是可编辑的。
但是在编辑模式下我只想要一行。
这是我的代码示例:
<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)。有一个用于保存的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>
那么,我如何才能只点击激活了编辑模式的行呢?或者有一个函数或属性在编辑模式下只允许一行?当该跨度具有内联显示时,我是否可以使用图标ui- jQuery -close来关闭该跨度,而不能使用display none点击其他跨度?
更新:我找到了的解决方案
我刚刚找到了一个自制的解决方案。如下所示:我向链接添加了一个onstart函数,但这会产生一个性能问题:它既被称为save,也被称为edit,还被称为cancel。我还更改了add row按钮的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;"
发布于 2015-07-14 15:56:03
上面的解决方案对我不起作用。作为另一种解决方案,当我使用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')});"/>
发布于 2013-11-20 00:04:07
您需要遍历元素,并取消任何其他编辑。
$('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-cancel').each(function(){
$(this).click();
});
https://stackoverflow.com/questions/19376811
复制相似问题