dataTable 中的行样式未更新答案

【问题标题】：Row style in dataTable is not updateddataTable 中的行样式未更新
【发布时间】：2015-03-10 04:57:35
【问题描述】：

我有一个启用了单元格编辑的数据表。该表有一个 rowStyleClass，它根据行状态（INSERTED、UPDATED、DELETED 或 NONE）分配背景颜色。因此，当我编辑一行时，它会获得 UPDATED 状态，当单击删除按钮时，行会获得 DELETE 状态，...基于该状态，行背景应该正确着色（绿色表示已更新，红色表示已删除，黄色表示插入）。

我的代码：

<p:dataTable id="tblElement" var="eltItem" value="#{bean.elementList}" binding="#{bean.dtElements}" emptyMessage="No data to be displayed."
                editable="true" editMode="cell" rowIndexVar="rowIndexElt" rowKey="#{eltItem.id}" resizableColumns="true" styleClass="eltStyle"
                rowStyleClass="#{bean.elementRowStyle}">

                <p:ajax event="cellEdit" listener="#{bean.doMarkRowAsUpdated}" update=":form1:tabView:tblElement" />

                <p:column>
                    <p:commandButton id="btnMarkAsDeleted" icon="ui-icon ui-icon-trash" update="tblElement" action="#{bean.doBtnMarkAsDeleted}">
                        <p:confirm header="Confirm" message="Do you really want to delete an element?" icon="ui-icon-alert" />
                    </p:commandButton>
                </p:column>

                <p:column headerText="Key">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{eltItem.key}" />
                        </f:facet>
                        <f:facet name="input">
                            <p:inputText value="#{eltItem.key}" />
                        </f:facet>
                    </p:cellEditor>
                </p:column>

               <!-- some more columns -->
<p:dataTable>

当一个单元格被编辑时，doMarkRowAsUpdated 方法应该被执行......确实如此。行状态设置为已更新，因此编辑后的行背景应着色为绿色，但不是。请注意，rowStyleClass 值应该是因为当表格编辑模式设置为“行”时整个着色工作。还要提一件事......假设我编辑了一些行。如前所述，背景颜色不会改变。但是，如果我的下一个操作是将其他行标记为已删除，则该行将显示为红色。这还不是全部 - 之前编辑的行也以绿色着色！就像在执行'button click'方法后，行样式更新，但执行'cellEdit'事件方法后，行样式没有更新。

对如何使行着色起作用有什么建议吗？

我正在使用 PF 5.1。

【问题讨论】：

也许你在 ajax 中的更新属性是错误的？我可以看到 ajax 组件正在更新：update=":form1:tabView:tblElement"，而你的 commandButton 有 update="tblElement"？
@EmilKaminski 因为 commandButton 在 tblElement 中。只需update="tblElement" 就可以了，它在“行编辑”模式下运行良好。我也试过update=":form1:tabView:tblElement"... 不走运。
查看以下之一：stackoverflow.com/questions/15257554/… 或 stackoverflow.com/questions/30120998/…

标签： jsf primefaces datatable inline-editing

【解决方案1】：

当您将表格嵌入表单并使用remoteCommand 更新表单时，它应该可以工作，如下所示：

<p:remoteCommand name="onCellEdit"  update="@form" />
<p:dataTable ... rowStyleClass="#{bean.elementRowStyle}">
<p:ajax 
   event="cellEdit"
   listener="#{bean.doMarkRowAsUpdated}"
   oncomplete="onCellEdit()"/>

【讨论】：

有更好的解决方案至少可以尝试...更新完整的数据表应该是最后的手段。查看我对问题的评论