jsf - Primefaces treetable 不同层次结构行的不同背景颜色

Question

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

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

谢谢！

Answer 1

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

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

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

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

Answer 2

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

Answer 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,PrimeFaces] 的“Folder2” ）， 如下：

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。