Primefaces数据表格标题宽度：自动

Question

我正在使用Primefaces 5开发一个动态数据表格。我已将表格宽度设置为自适应。这非常好。我的列只使用所需的宽度，非常完美。但是我还使用了分页器和表头。因此，我的表格看起来像这样：

<p:dataTable var="row"  
             editingRow="#{row.status == CommonConstant.ROWSTATUS_EDIT}" 
             tableStyle="width:auto"
             value="#{componentBean.componentData[componentId].lazyModel}"
             id="#{componentId}" 
             editable="true" scrollable="false" scrollHeight="100%"
             resizableColumns="true"
             paginator="true"
             paginatorPosition="top"
             rowsPerPageTemplate="10 25 50 100"
             lazy="true">
  <f:facet name="header">   
    <p:outputPanel style="text-align:right">  
      <h:commandLink rendered="#{fn:indexOf(componentBean.componentData[componentId].loadedData.actions, CommonConstant.ACTIONTYPE_EXCEL) >= 0}" >
        <img border="0" src="img/excel.png" width="24"/>
        <p:dataExporter type="xls" target="#{componentId}" fileName="#{appDialogId}" />
      </h:commandLink>

      <h:commandLink rendered="#{fn:indexOf(componentBean.componentData[componentId].loadedData.actions, CommonConstant.ACTIONTYPE_PDF) >= 0}">
        <img border="0" src="img/pdf.png" width="24"/>
        <p:dataExporter type="pdf" target="#{componentId}" fileName="#{appDialogId}"/>
      </h:commandLink>

    </p:outputPanel>    

    <p:outputPanel>
      <h:outputText value="#{componentBean.componentData[componentId].loadedData.appdialogid}" />
    </p:outputPanel>                                              
  </f:facet>
...
</p:dataTable>

我该如何强制表头和分页器与表格具有相同的宽度？

- Dominic Weiser

Answer 1

如果您需要普通的数据表，请使用以下方法：

.ui-datatable {
    display: table;
}

.ui-datatable table {
    table-layout: auto !important;
}

我还没有尝试调整大小或其他任何内容。

- Rares Oltean

---

这段代码的前半部分对我很有效，通过使分页器与表格宽度相同来解决问题。后半部分会导致表格实际上溢出：visible；这会影响水平滚动。 - Andrew

很不幸，我已经超过一年没有使用PrimeFaces了，也无法提供帮助。当我发布解决方案时，它可以在那个特定版本的PrimeFaces上运行。但是现在的新版本可能已经有所变化，导致我的解决方案不再适用。对于此事，我感到非常抱歉，无法再提供任何帮助。 - Rares Oltean

不需要，只要前半部分就足以让它在PF 6.0中工作。 - Andrew

Answer 2

假设您正在为数据表格设置自动宽度，因此我可以重现您的问题。

请尝试以下操作：

1. 将带有 ui-datatable 类的 div 上的样式设置为 min-width: $px，该值使您的表格适应
2. 从表格中删除自动宽度，并在表格元素上添加 table-layout: auto ! important，以使列仍自动调整大小，但相对于标题。

注意：表格元素上的宽度需要保持为默认值 100%，以填充标题。

以下内容与主题无关，但仍然“好知道”。

Primefaces 5 中的所有数据表格都使用 table-layout: fixed。 您可以使用 CSS 覆盖以匹配旧 Primefaces 模型。

.ui-datatable table, .ui-datatable-resizable table {
    table-layout: auto !important;
}

.ui-datatable-scrollable table {
    table-layout: fixed !important;
}

可滚动的数据表需要保持固定。

如果您删除输出面板并使用数据导出器facet进行链接，则可能会有所帮助。如果您喜欢标题中的链接，请将它们放在一个span中。

Priemfaces示例

<f:facet name="{Exporters}">
        <h:commandLink> ...
        </h:commandLink> ...
</f:facet>

- twinj

---

某种方式，这对我不起作用。如果我使用你的设置，我得到相同的结果。 - Dominic Weiser

如果您删除出口链接和面板，会发生什么？ - twinj

分页器面板仍然具有100％的宽度。我尝试了f:facet name="{Exporters}"结构，但不再看到导出按钮。 - Dominic Weiser

我该如何使用CSS类应用此代码？styleClass="..."，因为这段代码适用于所有数据表。 - xav56883728

谢谢 @twinj，你的答案帮了我一大忙！;) - Mariah

Answer 3

将您的数据表格放在一个panelGrid中。

<p:panelGrid id="forautowidth" columns="1">
    --- Data Table Here ---
</p:panelGrid>

这个表格周围有一个有点烦人的框，但比过度分页器要好得多。此外，它在浏览器页面大小变化时工作得很好。

- nbchesed