Primefaces 数据表行编辑器:只允许编辑一行 [英] 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)).有一个用于保存的 ajax 事件 (rowEdit)，以及用于取消的其他事件 (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" />
Update-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-datatr 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 数据表行编辑器:只允许编辑一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
