Question

我想右对齐一个outputText值（即下面的fee.TableAmount），我想保持该列的标题居中。我必须将哪个参数传递给下面的outputText来实现这个目标？

<h:dataTable>
    ...
    (other columns)
    ...
    <h:column headerClass="columnCenter">
        <f:facet id="header_agency" name="header">
            <h:outputText value="Amount"/>
        </f:facet>
        <h:outputText value="#{fee.tableAmount}">
            <f:convertNumber maxFractionDigits="2" groupingUsed="true"
                currencySymbol="$" type="currency" />
        </h:outputText>
    </h:column>
</h:dataTable>

Answer 1

您可以使用columnClasses的{{1}}属性在同一列的所有单元格上指定CSS类。您可以传递一个逗号分隔的类名字符串。

<h:dataTable>

上面为第一列呈现<h:dataTable columnClasses="column1,column2,column3">，为第二列呈现<td class="column1">，依此类推。这允许您外化和规范化样式。

想象一下，你有4列，第一，第二和第四列不需要有一个特殊的样式，只有第三列需要右对齐，然后这样做

<td class="column2">

与

结合使用

<h:dataTable columnClasses="none,none,right,none">

在语义上比td.right { text-align: right; }更正确，技术上更强大。

Answer 2

正如您所说，如果您直接在float: right上定义<h:outputText>，请执行以下操作：

<h:outputText style="float: right;" value="#{fee.tableAmount}"/>

然后它会将您的文本嵌套在<span>中，然后将其移动到右侧。

不幸的是，<h:column>组件没有提供指定列本身的CSS类的方法。但是，如果您正在为表使用其他组件，例如Richfaces <rich:column>，则还有另一种解决方案是指定：首先，设置CSS类：

.textOnRight {
    text-align: right;
}

然后，将此CSS类分配给您的列：

<rich:column styleClass="textOnRight" headerClass="columnCenter">
    <f:facet name="header">
        <h:outputText value="Amount"/>
    </f:facet>
    <h:outputText value="#{fee.tableAmount}">
        <f:convertNumber maxFractionDigits="2" groupingUsed="true"
            currencySymbol="$" type="currency" />
    </h:outputText>
</rich:column>

顺便说一句，在id中设置<f:facet>不会起任何作用，因为此组件不会处理此属性。

Answer 3

我刚为其他想要了解的人添加了style =“float：right”。

<h:outputText style="float:right" value="#{fee.tableAmount}">
   ...
</h:outputText>

右对齐数据表列中的单元格内容

3 个答案: