Primefaces treetable 不同层次结构行的不同背景颜色答案

【问题标题】：Primefaces treetable different background colors for rows of different hierarchyPrimefaces treetable 不同层次结构行的不同背景颜色
【发布时间】：2013-07-17 16:59:10
【问题描述】：

背景颜色是否有可能在不同的层次结构上有所不同？

例如，在上图中，将 Documents、Pictures、Movies 行设为绿色，将它们的子项设为黄色。

谢谢！

【问题讨论】：

标签： jsf primefaces

【解决方案1】：

在你的 treeNode 数据中，有一个函数，例如 String getRowStyle()，它会在你的 css 中返回一个类。

然后在你的 xhtml 中有类似的东西：

<p:treeTable
    value="#{manager.rootNode}"
    var="treeNode"
    rowStyleClass="#{treeNode.getRowStyle()}"
    >

如果您没有看到效果，请清除浏览器缓存以刷新 css。

【讨论】：

【解决方案2】：

您可以使用 setStyleClass 方法在给定的UITreeNode（用于表示树中的节点）上指定样式。

【讨论】：

如何用数据创建 UITreeNode？span>

【解决方案3】：

是的，您可以在 p:column 标签的 styleClass（或 style）属性中添加基于 #{document.type} 的条件.

一个简单的例子如下：

<p:column style="width:150px;background-color:#{document.type=='Folder' ? 'green' : (document.type=='Word Document' ? 'yellow' : '')};">
    <f:facet name="header">
        Name
    </f:facet>
    <h:outputText value="#{document.name}" />
</p:column>

但是，为了实现您所要求的，您需要修改 Java Bean 并为所需的 DefaultTreeNode 对象指定不同的类型（例如，[Documents, Pictures, Movies] 为“Folder1”，[Work] 为“Folder2” ,PrimeFaces])，如下：

TreeNode documents = new DefaultTreeNode(new Document("Documents", "-", "Folder1"), root);  
TreeNode pictures = new DefaultTreeNode(new Document("Pictures", "-", "Folder1"), root);  
TreeNode music = new DefaultTreeNode(new Document("Music", "-", "Folder1"), root);  

TreeNode work = new DefaultTreeNode(new Document("Work", "-", "Folder2"), documents);  
TreeNode primefaces = new DefaultTreeNode(new Document("PrimeFaces", "-", "Folder2"), documents);

并通过在每个 p:column 中添加以下内容来修改 JSF 页面：

<p:column styleClass="#{document.type=='Folder1' ? 'greenClass' : (document.type=='Folder2' ? 'yellowClass' : 'normalColumnClass')};">

然后定义 CSS 类：greenClass、yellowClass 和 normalColumnClass。

【讨论】：