【问题标题】:PrimeFaces DataTable row coloring not workingPrimeFaces DataTable 行着色不起作用
【发布时间】:2014-06-08 02:54:03
【问题描述】:

我想根据状态列更改行的颜色。 我查看了 primefaces 网站上的示例
http://www.primefaces.org/showcase/ui/datatableColoring.jsf
并在网上查找示例,但我似乎无法让它与我的代码一起使用。 问题是它突出显示了所有内容,而不仅仅是状态设置为“已关闭”的行

这是我的代码

<p:dataTable id="ComplaintTable" var="complainer"
                    rowKey="#{complainer.id}"
                    selection="#{bigComplaintsDAO.selectedComplaintRow}"
                    widgetVar="complaintsTableSearch"
                    paginator="True" rows="15" 
                    paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                    rowsPerPageTemplate="15,20,30,40,50,100"
                    resizableColumns="true"
                    filteredValue="#{bigComplaintsDAO.filteredComplaintRow}"
                    selectionMode="single" value="#{bigComplaintsDAO.complaintList}"
                    style="font-size:10px;width:100%;"
                    rowStyleClass="#{(complaint.status) eq Closed ? 'Closed' : null}">

和 CSS

<style type="text/css">
            .Closed 
            {
                background-color: #6CE26C !important;
                background-image: none !important;
                color: #000000 !important;
            }
</style>

【问题讨论】:

    标签: css jsf primefaces xhtml datatables


    【解决方案1】:

    在我的例子中,如果数据表放在 p:panelGrid 中,rowStyleClass 不起作用。 我切换到 p:panel 然后它工作了。

    【讨论】:

    • 确定没有应用rowStyleClass(独立于css selwctpr 工作与否)?我认为 panelGrid 没有理由破坏事物
    • 是的,先生,我确定。如果我尝试在列中设置样式,它可以正常工作。然后我只将容器从 panelGrid 更改为 panel 并且效果很好。很奇怪。如果您需要有关我使用的版本的详细信息,请告诉我。
    【解决方案2】:

    对我来说,以下代码有效:

    数据表 (HTML)

    <p-dataTable [rowStyleClass]="getRowClass">
    

    组件 (TS)

      getRowClass() {
        return 'my-new-class';
      }
    

    【讨论】:

    • 这不是 PrimeFaces 而是 PrimeNG
    【解决方案3】:

    解决了! 我将代码更改为

    rowStyleClass="#{(complainer.status) eq 'Closed' ? 'Closed' : null}"   
    

    希望这对将来的其他人有所帮助!

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-12-01
      • 2013-08-05
      • 2011-07-25
      • 1970-01-01
      • 2011-09-15
      • 2016-06-29
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多