如何在 PrimeFaces 3.0 的 p:dataTable 中设置 p:column 的宽度?

Posted

技术标签:

【中文标题】如何在 PrimeFaces 3.0 的 p:dataTable 中设置 p:column 的宽度?【英文标题】:How to set width of a p:column in a p:dataTable in PrimeFaces 3.0? 【发布时间】:2011-11-18 01:14:03 【问题描述】:

我正在使用 PrimeFaces 3.0-M3,我有一个 <p:dataTable>,其中包含两列。我希望第一列的宽度固定为 20px。另一列可以使用剩余的任何空间。

以下是我目前得到的截图:

第一个<p:column> 似乎忽略了应该限制宽度的style 设置。它的大小对于作为其中唯一内容的小彩色方块来说太大了,然后另一列被推到了右边太远。

这是我的更多 Facelet 代码:

<p:dataTable
        id="dataTableExpressions"
        value="#catconBean.userDefinedExpressionDataModel"
        var="currentRow"
        emptyMessage="!! EMPTY TABLE MESSAGE !!"
        selection="#catconBean.userDefinedExpressionToEdit"
        selectionMode="single">
    <p:ajax 
            event="rowSelect" 
            listener="#catconBean.onUserDefinedExpressionRowSelect"
            update=":toolbarForm:catconToolbar" />
    <p:ajax 
            event="rowUnselect" 
            listener="#catconBean.onUserDefinedExpressionRowUnselect"
            update=":toolbarForm:catconToolbar" />

    <p:column id="paletteColor" style="width:20px;">
        <h:panelGroup 
                layout="block"
                rendered="#not empty currentRow.paletteColor"
                style="width:16px;height:16px;border:thin;border-style:solid;border-color:black;background-color:##currentRow.paletteColor.RGB;" />
        <h:panelGroup 
                layout="block"
                rendered="#empty currentRow.paletteColor"
                style="width:16px;height:16px;border:thin;border-style:dashed;border-color:red;background-color:white;text-align:center;">
            <h:outputText value="?" style="color:red;font-weight:bold;" />
        </h:panelGroup>
    </p:column>

    <p:column id="name">
        <f:facet name="header">
            <h:outputText value="#bundle.catcon_label_CategoryName" />
        </f:facet>
        <h:outputText 
            value="#currentRow.name"
            style="#not currentRow.definitionComplete ? 'color:red;' : ''" />
    </p:column>
</p:dataTable>

谁能告诉我如何修改我的 Facelet 代码以使第一列具有 20 像素的固定宽度?

【问题讨论】:

【参考方案1】:

在 PrimeFaces 3.0 中,该样式应用于生成的表格单元格的内部 &lt;div&gt;,而不是您(和我)期望的 &lt;td&gt;。以下示例应该适合您:

<p:dataTable styleClass="myTable">

.myTable td:nth-child(1) 
    width: 20px;

在 PrimeFaces 3.5 及更高版本中,它应该完全按照您的编码和预期方式工作。

【讨论】:

我试过了,但似乎没有任何效果。我所做的唯一其他更改是从我的 &lt;p:column&gt; 声明中删除 style="width:20px;",这也没有任何效果。 它是...在 Firefox 4.0.1 下与您的解决方案一起使用,但在 IE 7 下无法使用。不幸的是,IE 7 是目标环境中使用的浏览器。跨度> 那个老浏览器确实不支持所有现代选择器。考虑 IE7.js:code.google.com/p/ie7-js 或者向 PF 家伙报告一个问题,你希望 columnClasses 回到 &lt;p:dataTable&gt; 中,就像 &lt;h:dataTable&gt; 一样(这是我看到的第一个,但令我惊讶的是它没有'不支持该属性)另见forum.primefaces.org/viewtopic.php?f=3&t=1797 会的。感谢您的帮助! 不客气。也许他们将能够提出替代的和 IE7 兼容的方法来实现这一要求。到目前为止,我没有看到任何内容,但我会对他们的回答感到好奇。【参考方案2】:

你可以试试

<p:column >

【讨论】:

【参考方案3】:

我不知道您使用的是什么浏览器,但根据 w3schools.com,nth-child 和 nth-last-child 现在可以在 MSIE 8 上运行。我不知道 9。http://www.w3schools.com/cs-s-ref/pr_border-style.asp 会给你更多信息。

【讨论】:

【参考方案4】:

我刚刚执行了以下操作(在 V 3.5 中),它就像一个魅力:

<p:column headerText="name" />

【讨论】:

【参考方案5】:

这对我有用

<p:column headerText="name" style="width:20px;"/>

【讨论】:

【参考方案6】:

除了@BalusC 的答案。您还需要设置标题的宽度。在我的情况下,下面的 css 只能适用于我的表格的列宽。

.myTable td:nth-child(1),.myTable th:nth-child(1) 
   width: 20px;

【讨论】:

【参考方案7】:

由于某种原因,这不起作用

<p:column headerText=""  sortBy="#row.key">

但这有效:

<p:column headerText=""  sortBy="#row.key">

【讨论】:

(仍然有效:)在 Primefaces 6.1 中,没有单位的属性宽度表示 px,单位 % 表示表格宽度的百分比。 % 对我不起作用。我能够使用例如width="40"width="60" 就像他们是 % 一样。 原因是PF在width属性中添加了“px”,所以在第一种情况下你得到了style="width:10pxpx"【参考方案8】:

内联样式在任何情况下都可以工作

  <p-column field="Quantity" header="Qté" [style]="'width':'48px'">

【讨论】:

以上是关于如何在 PrimeFaces 3.0 的 p:dataTable 中设置 p:column 的宽度?的主要内容,如果未能解决你的问题,请参考以下文章

PrimeFaces 3.0 - <p:dataTable> 标题不与使用 scrollable="true" 对齐

向 p:datatable 添加新行,然后提交内容

Primefaces:如何在 primefaces 3.5 中为菜单栏设置粘性

Primefaces:如何更改日历字段按钮上的默认图标?

如何在primefaces数据表中显示可变数量的列

我如何改变primefaces中标签的方向?