Primefaces treetable不同的背景颜色为不同的等级的行

Question

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

例如，在上图中，将文档，图片，电影的行设为绿色，将其子项设为黄色。

谢谢！

Answer 1

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

Answer 2

是的，您可以在 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'和[Work2的'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：列中添加以下内容来修改JSF页面：

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

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

Answer 3

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

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

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

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