JSF PrimeFaces - 单击按钮时保存所选表格单元格的值

Question

先决条件:

JSF 2.1

Primefaces 5.2

玻璃鱼 3.1

故事:

我得到了一个显示一些可编辑值的数据表。
列的数量是动态的。
在同一个表单中有一个按钮调用我的 bean 的保存操作来保存所有编辑过的数据。
它自己的功能运行良好

执行:

<p:dataTable id="dataTable" scrollable="true"
    widgetVar="wigVardataTable"
    value="#{myBean.dataList}"
    var="data"
    editable="true"
    editMode="cell"
    rowKey="rowkey">        
   <p:columns var="col"
     value="#{myModel.columnList}"
     style="font-size: 12px">
     <f:facet name="header">
        <h:outputText
          value="#{col.header}" />
     </f:facet>
     <p:cellEditor>
        <f:facet name="output">
          <h:outputText
            value="#{myModel.getValueForTableCell(data, col).value}" />
        </f:facet>
          <f:facet name="input">
            <p:inputText
              id="inputTxt"
              value="#{myModel.getValueForTableCell(data, col).value}"
              style="width:100%">       
            </p:inputText>
        </f:facet>
      </p:cellEditor>
    </p:columns>
  </p:dataTable>

问题:

在编辑表格单元格且尚未失去焦点时按下保存按钮时，表格单元格输入文本中的新值不会被写回到我的 bean 中，因此不会被保存。

题:

在执行按钮操作之前，如何将数据写回到我的支持 bean 中？

Answer 1

此行为是由错误的 ajax 事件顺序引起的。当在单元格编辑器打开的情况下调用命令按钮时，命令按钮的 ajax 事件在单元格编辑的 ajax 事件之前被触发。

因此，我们想交换它们。无需编辑 PrimeFaces 源代码，您可以通过显式调用 saveCell() 来实现这一点。 <p:dataTable>的功能打开单元格编辑器时的小部件。

所以，给定一个

<h:form>
    <p:dataTable ... widgetVar="wigVardataTable" />
    <p:commandButton ... />
</h:form>

您可以通过添加以下 onclick 来实现所需的行为到 <p:commandButton> :

onclick="var d=PF('wigVardataTable'), c=d.jq.find('td:has(.ui-cell-editor-input:visible)'); if(c.length)d.saveCell(c)"

基本上，它首先使用打开的单元格编辑器找到单元格，然后调用 saveCell()在上面。

另一种不太优雅的方式是显式调用 showCellEditor() <p:dataTable>的功能小部件没有在 try-catch 中传递预期的目标单元格忽略异常的块。

onclick="try{PF('wigVardataTable').showCellEditor()}catch(ignore){}"

它将首先保存任何打开的单元格，然后抛出一个错误，即没有将新的目标单元格指定为参数，但可以忽略如上所示。

应该注意的是，无论您是否使用 <p:columns>，这一切都有效。或 <p:column> ，也不管你使用的是普通模型还是过于复杂的模型；) 这个技巧在你的 PrimeFaces 5.2 版本和当前的 PrimeFaces 6.0 版本上都经过了测试。