Primefaces treetable different background colors for rows of different hierarchy

问题

Is there any chance that the background colors can be different on different hierarchies?

For example, in the above picture, make the rows of Documents, Pictures, Movies green and their children yellow.

Thank you!

回答1:

You can specify on a given UITreeNode (that's used to represent a node within a Tree) the style by using the the setStyleClass method.

回答2:

Yes, you can add conditions based on #{document.type} inside styleClass (or style) attributes of p:column tags.

A quick example could be as follows:

<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>

However, in order to implement what you asked for you need to modify the Java Bean and specify different types for the desired DefaultTreeNode objects (for example 'Folder1' for [Documents, Pictures, Movies] and 'Folder2' for [Work,PrimeFaces]), as follows:

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);

and modify the JSF page by adding the following in each p:column:

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

and then define the CSS classes: greenClass, yellowClass and normalColumnClass.

回答3:

In your data for your treeNode, have a function such as String getRowStyle() which returns a class in your css.

Then in your xhtml have something like:

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

If you don't see the effect clear your browser cache to refresh the css.

来源：https://stackoverflow.com/questions/17705877/primefaces-treetable-different-background-colors-for-rows-of-different-hierarchy

标签

jsf

primefaces