Home / Questions / 152233
Accepted
hecnabae
Asked: 2020-04-03 05:10:08 +0800 CST 2020-04-03 05:10:08 +0800 CST

更新primefaces的数据表组件的问题

  • 772

我正在开发一个 Primefaces 6.2 应用程序，其中我在编辑模式下使用数据表组件。

<p:remoteCommand name="refrescarTabla"
    actionListener="#{bean.dlgEditar.refrescarTabla}"
    update="pgTabla"/>
    <h:panelGroup id="pgTabla">
         <p:dataTable id="tabla" var="reg"
              value="#{bean.dlgEditar.datos}" editable="true" editMode="cell"
                                     widgetVar="cellDato">
         <p:ajax event="cellEdit"
              listener="#{bean.dlgEditar.alEditarRegistro}"
              oncomplete="refrescarTabla()"/>
        ...
        </p:datatable>
</h:panelGroup>

当我第一次编辑表格单元格时，该组件可以正常工作。

有些列依赖于其他列，因此当我在单元格中进行更改时，我必须刷新表（为此我使用 remoteCommand 组件）以反映更改。从这一刻起问题就出现了，如果我再次尝试编辑一个单元格，该单元格会在不到一秒的时间内失去焦点，因此我无法编辑该值。

我在 SO：https ://stackoverflow.com/a/19927578/2131029 上看到了一些类似 BalusC 的帖子的建议，但是我无法解决问题。

第 1 版

我刚刚创建了一个重现问题的示例：https ://github.com/hecnabae/pf-datatable 。

该示例以表格形式显示食谱的成分。它显示的字段是名称、金额和百分比。编辑字段时（金额可编辑），启动远程命令以更新表格。

为了重现该问题，我们只需尝试编辑一种成分的数量，然后单击另一种成分的数量（也可以进行编辑）。我们将看到瞬间失去焦点的效果。

java

1 Answers

  1. Best Answer

    问题源于以下事件序列：

    • 用户单击单元格
    • PF 开始这个版本
    • 用户可选择修改其值
    • 用户单击另一个单元格
    • PF触发第一个单元格的cellEdit事件
    • PF 开始编辑另一个单元格
    • 终止由启动的 ajax 调用cellEdit
    • PF 传唤p:remoteCommand
    • PF 更新整个表格，失去另一个单元格的编辑视图

    结果？

    表格的html视图和表格的内部状态p:dataTable不一致。html 视图呈现为无活动版本，但 dataTable 的内部状态显示存在活动版本。

    执行完整更新时发生的逻辑结果是，primefaces 不支持在编辑单元格时更新整个表格。

    可能的解决方案

    • p:dataTable黑客解决方案是在更新完成后修改其内部状态，p:remoteCommand方式如下：

      <p:remoteCommand name="refrescarTablaIngredientes"
                 oncomplete="PF('cellIngredientes').currentCell = null"
                 update="dtIngredientes"/>

    • 另一种选择是不使用单元格编辑，而是使用整行编辑。这使得在重新加载整个表时快速编辑不同的行变得更加困难。

    • 最后，您可以将独立数据与依赖数据分开，从而简单地更新依赖表。
    • 3