Primefaces数据表Roweditor:仅允许编辑一行 [英] Primefaces datatable roweditor: only permit one row editing
问题描述
我正在使用JSF 2.1.6和Primefaces 3.4.1，但我有一个问题.
I'm working with JSF 2.1.6 and Primefaces 3.4.1 and I have a question.
我有一个带有行编辑器的可编辑数据表.您可以单击每行的铅笔按钮，该行将是可编辑的. 但是默认情况下，可以单击许多铅笔按钮，因此许多行都是可编辑的.
I have an editable datatable with row editor. You can click the pencil button of each row, and the row will be editable. But by default it's possible to click many pencil button, and for this reason many rows will be editable.
但是我只希望在编辑模式下一行.
But I want only one row in edit mode.
这是我的代码的示例:
<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代码.
I've encapsulated the row editor component in a command link component, because now I can add Javascript code when clicking the row editor.
我尝试将以下Javascript代码添加到commandLink中:
I've tried adding this Javascript code to the commandLink:
onclick="$('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-cancel').click()"
但是这会创建太多的递归并且不起作用.
But this create so much recursion and not works.
行编辑器具有三个范围链接:一个用于打开编辑模式(ui-icon-pencil)，另一个用于保存版本(ui-icon-check)，另一个用于取消版本(ui-icon-close ). Ther是一个用于保存(rowEdit)的ajax事件，另一个是用于取消(rowEditCancel)的事件.
The row editor has three span links: one for open the edit mode (ui-icon-pencil), other that saves the edition (ui-icon-check), and other that cancel the edition (ui-icon-close). Ther is an ajax event for saving (rowEdit), and other event for cancelling (rowEditCancel).
未激活编辑模式的文件，行编辑器的跨度如下:
Files where edit mode is not activated, the row editor spans like this:
<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>
激活了编辑模式的文件和行编辑器的跨度如下:
And files where edit mode is activated the row editor spans like this:
<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的跨度，而其他人则不显示任何显示?
So, how can I click only the rows where edit mode is activated? Or there is a function or property to permit only one row in edit mode? Can I click only with jQuery the spans with icon ui-icon-close when that span has display inline, and not the others with display none?
更新:我找到的解决方案
我刚刚找到了自制解决方案.这里是: 我已经在链接中添加了onstart函数，但这会产生性能问题:保存，编辑和取消都被称为.而且我还更改了添加行按钮的oncomplete功能.
I've just found a homemade solution. Here it is: I've added a onstart function to the link, but this generates a performance issue: it's called both as to save, to edit, and to cancel. And also I've changed the oncomplete function of the add row button.
<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函数:
Update-2: Finally I found a solution to the performance issue. My problem was that the Javascript action was called when clicking to edit, save and cancel the row edition. To prevent that, I changed the onstart function to an onclick function that changes the other rows to non editable only when clicking the edit row button (pencil icon). To do that I use event.target, to know what element has clicked. As row edit, row edit save and row edit cancel button has different classes (ui-icon-pencil, ui-icon-check and ui-icon-close), it can be possible you can differentiate which button was pressed. So this is the function that replaces the onstart function:
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;"
推荐答案
上述解决方案不适用于我.作为一种替代解决方案，当我使用CSS编辑行时，我只是隐藏了编辑按钮(铅笔)
The above solution is not working for me. As an alternativ solution, I just hide the edit-button (pencil) when I'm editing a row with 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')});"/>
这篇关于Primefaces数据表Roweditor:仅允许编辑一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
