如何在 PrimeFaces 3.0 中的 p:dataTable 中设置 p:column 的宽度? [英] How to set width of a p:column in a p:dataTable in PrimeFaces 3.0?

问题描述

我使用的是 PrimeFaces 3.0-M3 并且我有一个 ，其中有两列.我希望第一列的宽度固定为 20px.另一列可以使用剩余的任何空间.

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

第一个 似乎忽略了应该限制宽度的 style 设置.它的大小对于作为其中唯一内容的小彩色方块来说太大了，然后另一列被推得太远了.

这是我的更多 Facelet 代码:

<p:ajax事件=行选择"listener="#{catconBean.onUserDefinedExpressionRowSelect}"update=":toolbarForm:catconToolbar"/><p:ajax事件="rowUnselect"listener="#{catconBean.onUserDefinedExpressionRowUnselect}"update=":toolbarForm:catconToolbar"/><p:column id="paletteColor" style="width:20px;"><h:面板组布局=块"render="#{not empty currentRow.paletteColor}"style="width:16px;height:16px;border:thin;border-style:solid;border-color:black;background-color:##{currentRow.paletteColor.RGB};"/><h:面板组布局=块"render="#{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="?"样式=颜色:红色；字体粗细:粗体；"/></h:panelGroup></p:列><p:column id="name"><f:facet name="header"><h:outputText value="#{bundle.catcon_label_CategoryName}"/></f:facet><h:输出文本value="#{currentRow.name}"style="#{not currentRow.definitionComplete ?'color:red;': ''}"/></p:列></p:dataTable>

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

解决方案

在 PrimeFaces 3.0 中，该样式应用于生成的表格单元格的内部

，而不是 ><td> 正如您(和我)所期望的那样.以下示例应该适合您:

与

.myTable td:nth-child(1) {宽度:20px；}

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

I'm using PrimeFaces 3.0-M3 and I have a <p:dataTable> with two columns in it. I want the first column to be fixed at a width of 20px. The other column can use whatever space is left over.

Here are screenshots of what I'm currently getting:

The first <p:column> seems to be ignoring the style setting that should have limited the width. It is sized way too big for the tiny coloured square that is the only content inside it and then the other column is pushed too far to the right.

Here is more of my Facelet code:

<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>

Can anyone tell me how to modify my Facelet code to make the first column have a fixed width of 20px?

解决方案

In PrimeFaces 3.0, that style get applied on the generated inner <div> of the table cell, not on the <td> as you (and I) would expect. The following example should work out for you:

<p:dataTable styleClass="myTable">

with

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

In PrimeFaces 3.5 and above, it should work exactly the way you coded and expected.

这篇关于如何在 PrimeFaces 3.0 中的 p:dataTable 中设置 p:column 的宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！