JSF PrimeFaces - 在buttonclick上保存所選tablecell的值

Question

先決條件：

• 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>

問題：

當正在編輯表格單元格時按下保存按鈕並且還沒有失去焦點時，表格單元格的inputtext中的新值將不會被寫回到我的bean中，因此不會保存。

題：

在執行按鈕操作之前，如何將數據寫回我的支持bean？

Answer 1

此行為是由ajax事件的錯誤排序引起的。 在打開單元格編輯器的同時調用命令按鈕時，在單元格編輯的ajax事件之前觸發命令按鈕的ajax事件。

因此，我們想要交換它們。 在不編輯PrimeFaces源代碼的情況下，您可以通過在打開單元格編輯器時顯式調用<p:dataTable>小部件的saveCell()函數來實現此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版本。

Answer 2

這是一個受BalusC答案啟發的通用解決方案，如果你有其他數據表與單元格editMode：

<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>