Question

我想使用不同的背景图像而不是特定treeNode的默认值。

<h:panelGroup id="tree-panel">
        <p:tree 
            id ="tree"
            value="#{processBean.root}" 
            var="sp" 
            dynamic="false" 
            cache="true" 
            animate="true"
            selectionMode="single"
            selection="#{processBean.selectedNode}"
            rendered="#{processBean.renderTree}"> 
            <p:treeNode type="csp" collapsedIcon="ui-icon-folder-collapsed"
                        expandedIcon="ui-icon-folder-open"
                        styleClass="jdhf">  
                <h:outputText value="#{sp}" />  
            </p:treeNode>
            <p:treeNode type="ncsp" icon="ui-icon-document" >  
                <h:outputText value="#{sp}" />  
            </p:treeNode>
        </p:tree> 
    </h:panelGroup>


.jdhf {
background-image: url("#{resource['primefaces-redmond/images/ui-icons_cd0a0a_256x240.png']}");
}

如何更改第一个节点（csp）的样式？

由于

Answer 1

这是您的选择器不够具体的情况。可以找到特异性的一个例子here（包括一个明确的解释）。

在这种特定情况下，在您的css选择器中将#tree放在.jdhf前会解决它

所以

#tree .jdhf {…}

Answer 2

这将完成这项工作：

 <p:treeNode type="ncsp" icon="ui-icon-document" styleClass="custom">  
                <h:outputText value="#{sp}" />  
            </p:treeNode>


.custom .ui-treenode-content .ui-icon {
    background-image: url("#{resource['primefaces-redmond/images/ui-icons_cd0a0a_256x240.png']}");
}

如何更改treeNode背景图片

2 个答案: