为什么我的 dataTable 的 summaryRow 不显示？答案

【问题标题】：Why doesn't the summaryRow of my dataTable display?为什么我的 dataTable 的 summaryRow 不显示？
【发布时间】：2017-08-26 03:01:58
【问题描述】：

我的 JSF 页面上有一个 dataTable：

<p:dataTable id="dataCabecera" value="#{cargaHorariaController.listaActivDoc}" var="listaActDoc"
             rowKey="#{listaActDoc.pzptcabperjactPK.pzptcabperjactActividad}" selectionMode="single"
             selection="#{cargaHorariaController.listaActivSelected}">
    <p:column headerText="Actividad" style="width: 35%">
        <p:outputLabel value="#{listaActDoc.pzptcabperjactPK.pzptcabperjactActividad} - #{cargaHorariaController.descActiv(listaActDoc.pzptcabperjactPK.pzptcabperjactActividad)}"/>
    </p:column>

    <p:column headerText="Horas" style="width: 15%">
        <p:outputLabel value="#{listaActDoc.pzptcabperjactHoras}" />
    </p:column>

    <p:column headerText="" style="width: 20%">
        <p:commandLink id="cmdSubacti" process="dataCabecera"
                       style="margin:0px" title="subactividad" value="Ver Subactividad"
                       action="#{cargaHorariaController.consultarSubactividadesDoc()}" update=":formPrincipal:formPrincipal1:pnlDet">
            <f:setPropertyActionListener value="#{listaActDoc}" target="#{cargaHorariaController.activSelected}"/>
        </p:commandLink>
    </p:column>

    <p:column headerText="" style="width: 30%">
        <p:commandButton value="Actualizar" type="button" id="actiActu" action="#{cargaHorariaController.actualizar()}" onclick="PF('wdlgActualizar').show()" />
        <p:spacer width="15px" height="0px"> </p:spacer>
        <p:commandButton value="Eliminar" id="actiEli" ajax="false">
            <p:confirm header="Eliminar actividad" message="Está seguro que desea eliminar esta actividad?" icon="ui-icon-alert" />
        </p:commandButton>
        <p:confirmDialog global="true" showEffect="fade" hideEffect="fade" style="font-size: 11px; text-height: font-size; text-align: left; font-weight: bold">
            <div align="center">
                <p:commandButton value="Sí" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                <p:commandButton value="Cancelar" type="button" styleClass="ui-confirmdialog-no CyanButton" icon="ui-icon-close" />
            </div>
        </p:confirmDialog>
    </p:column>
    <p:summaryRow>
        <p:column colspan="1" style="text-align: right">
            <p:outputLabel value="Total:" />
        </p:column>
        <p:column colspan="2" style="text-align: left">
            <p:outputLabel value="#{cargaHorariaController.horasAct}" />
        </p:column>
    </p:summaryRow>
</p:dataTable>

我想要表格底部“Horas”列的总和，但 summaryRow 没有出现：

我的按钮中的图标（jQueryUI 图标和 Font Awesome 图标）也有同样的问题。我该如何解决？

已编辑： 我使用了 h:outputText 并更改了 colspan 属性，所以现在它们加起来为 4，但结果相同：没有 p:summaryRow。我调用 horasAct 是因为该变量具有求和的结果。

【问题讨论】：

标签： jsf jakarta-ee primefaces

【解决方案1】：

首先对于显示信息，最好使用h:outputText 组件。因为p:outputLabel 组件需要将标签与输入字段绑定。

它提供了一些优点，例如：

如果您将输入字段标记为必填字段，则此字段的 neer 标签将显示“*”符号
标签中的值将用于Faces Messages

关于您的p:summaryRow。在p:dataTable 中有四列，但在p:summaryRow colSpan 属性的列中总共不给出4（只有3）。

您还说过要对“Horas”列中的值求和。但是调用

#{cargaHorariaController.horasAct} 而不是#{listaActDoc.pzptcabperjactHoras}

更新

您需要添加 sortBy 属性，然后将显示 summaryRow。但是这个组件计算相同行的列值的总和。您可以查看更多示例 here 只是为了尝试按不同的列对表进行排序。

我认为您应该使用columnGroup 组件并为您的表格添加页脚。该组件仅在表格底部添加一行，您可以在那里输出 horas 列的总和。

【讨论】：