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

【问题标题】：JSF PrimeFaces - Save value of selected tablecell on buttonclickJSF PrimeFaces - 单击按钮时保存选定表格单元格的值
【发布时间】：2017-01-05 01:58:46
【问题描述】：

先决条件：

JSF 2.1
Primefaces 5.2
Glassfish 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？

【问题讨论】：

标签： jsf primefaces datatable focus

【解决方案1】：

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

因此，我们想交换它们。在不编辑 PrimeFaces 源代码的情况下，您可以通过在单元格编辑器打开时显式调用 <p:dataTable> 小部件的 saveCell() 函数来实现此目的。

所以，给定一个

<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()。

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

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

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

需要注意的是，无论您使用<p:columns> 还是<p:column>，也无论您使用的是普通模型还是过于复杂的模型，这一切都有效；) 这个技巧在您的 PrimeFaces 5.2 版本和当前 PrimeFaces 6.0 版本。

【讨论】：

感谢您的回答。我包括了你的解决方案，到目前为止它似乎工作得很好。我仍在测试它是否存在可能的错误，但到目前为止我找不到任何东西。
@BalusC 你说ajax事件的顺序是错误的。这是否意味着这一切都是由 PrimeFaces 中的错误引起的？
我可以确认此解决方案在 PrimeFaces 7.0 上完美运行

【解决方案2】：

如果您有其他具有单元格编辑模式的数据表，这是一个受 BalusC 答案启发的通用解决方案：

<script type="application/javascript">
    function saveAllCellsBeforeSubmit() {
        for (var widgetName in PrimeFaces.widgets) {
            if (PrimeFaces.widgets[widgetName].hasOwnProperty('cfg') &amp;&amp; PrimeFaces.widgets[widgetName].cfg.hasOwnProperty('editMode') &amp;&amp; PrimeFaces.widgets[widgetName].cfg.editMode === 'cell') {
                var d = PF(widgetName);
                var c = d.jq.find('td:has(.ui-cell-editor-input:visible)');
                if (c.length) {
                    d.saveCell(c);
                }
            }
        }
    }
</script>

【讨论】：