如何在 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 中,该样式应用于生成的表格单元格的内部 <div>
,而不是您(和我)期望的 <td>
。以下示例应该适合您:
<p:dataTable styleClass="myTable">
与
.myTable td:nth-child(1)
width: 20px;
在 PrimeFaces 3.5 及更高版本中,它应该完全按照您的编码和预期方式工作。
【讨论】:
我试过了,但似乎没有任何效果。我所做的唯一其他更改是从我的<p:column>
声明中删除 style="width:20px;"
,这也没有任何效果。
它是...在 Firefox 4.0.1 下与您的解决方案一起使用,但在 IE 7 下无法使用。不幸的是,IE 7 是目标环境中使用的浏览器。跨度>
那个老浏览器确实不支持所有现代选择器。考虑 IE7.js:code.google.com/p/ie7-js 或者向 PF 家伙报告一个问题,你希望 columnClasses
回到 <p:dataTable>
中,就像 <h:dataTable>
一样(这是我看到的第一个,但令我惊讶的是它没有'不支持该属性)另见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" 对齐