p:treeNode：自定义 TreeNode 类型的自定义图标答案

【问题标题】：p:treeNode: Custom Icons for custom TreeNode Typesp:treeNode：自定义 TreeNode 类型的自定义图标
【发布时间】：2023-03-17 12:24:01
【问题描述】：

我正在运行 Primefaces 5.3.10、Mojarra 2.2.13、Java8 和 Tomcat8。

我想要一个具有不同类型 TreeNode 的 primefaces 树。每种类型的 TreeNode 都应使用相应的自定义图标呈现。

我在网上研究了一些示例，但找不到可行的解决方案。

我有一个 java 类 TreeModel.java，它提供了一个 TreeNode：

public class TreeModel {

    TreeNode root = new DefaultTreeNode("Root", null);

    public TreeNode getRoot(){
        return root;
    }

    public void populizeTree(){
        TreeNode node = new DefaultTreeNode("customType1", "nodeName", root);
        TreeNode subNode = new DefaultTreeNode("customType2", "subNodeName", node);
        TreeNode subNode2 = new DefaultTreeNode("customType3", "subNode2Name", node);
    }
}

还有一个描述我的树的 CustomTree.xhtml：

<p:tree value="#{TreeModel.root}" 
     var="node" 
     highlight="true"
     dynamic="true"
     selectionMode="single"
     id="modultree"
     style="width: 980px;">
      <p:treeNode type="customType1" icon="icon-modul">
          <h:outputText value="#{node}"/>
      </p:treeNode>
      <p:treeNode type="customTyp2" icon="icon-konto">
          <h:outputText value="#{node}"/>
      </p:treeNode>
      <p:treeNode type="customType3" icon="icon-exam">
          <h:outputText value="#{node}"/>
      </p:treeNode>
</p:tree>

为了为不同的 TreeNode 类型显示不同的图标，我还创建了名为 TreeNode.css 的 css 文件：

.icon-modul {
    background: transparent url("#{resource['images:hio-modul.png']}")!important;
    height: 16px;
    width: 16px;
}

.icon-konto {
    background: transparent url("#{resource['images:hio-konto.png']}")!important;
    height: 16px;
    width: 16px;
}

.icon-exam {
    background: transparent url("#{resource['images:hio-pruefung.png']}")!important;
    height: 16px;
    width: 16px;
}

并将 png 文件放在目录 /myApp/resources/images/ 中。

我尝试了一些变体，但无论哪种方式都不会呈现自定义图标。

我做错了什么？

【问题讨论】：

我认为你的 icon="SOME_CSS" 有错误，我建议使用 StyleClass="SOME_CSS"。
我相信你可以提供更多信息然后'自定义图标将不会被呈现'......浏览器开发者工具是你的朋友！

标签： primefaces tree icons treenode

【解决方案1】：

Kukeltje 的提示解决了我的问题。使用 Firebug 我可以看到，css 应该像

.ui-widget-content .icon-exam {
    background-image: url("../images/hio-pruefung.png") !important;
    height: 16px;
    width: 16px;
}

我找不到使用以下语法引用图像的方法： url("#{resource['images:hio-pruefung.png']}")

【讨论】：