如何在Oracle APEX中为树内不同节点设置自定义图标

方法1：通过树的SQL查询直接指定图标 #

这是最省心的方式，APEX树本身支持在SQL数据源里返回ICON列，直接给每个节点指定图标路径：

1. 打开你的树组件编辑界面，找到SQL查询部分
2. 在查询里加个ICON列，值用共享组件图片的路径格式：#APP_IMAGES#你的图标文件名.png（工作区图片用#WORKSPACE_IMAGES#）
   举个SQL例子：

   SELECT 
       id AS id,
       parent_id AS parent_id,
       name AS name,
       -- 根据节点类型返回对应图标
       CASE 
           WHEN node_type = '文件夹' THEN '#APP_IMAGES#folder.png'
           WHEN node_type = '文档' THEN '#APP_IMAGES#doc.png'
           ELSE '#APP_IMAGES#default.png'
       END AS icon
   FROM your_tree_table
   

3. 保存后刷新页面，树会自动加载对应节点的图标

方法2：JavaScript动态替换图标 #

如果SQL方式满足不了复杂逻辑，就在树渲染完之后用JS改图标：

1. 给页面加个动态动作，触发条件选页面加载
2. 动作类型选执行JavaScript代码，贴这段代码（根据你的节点属性调整判断逻辑）：

   // 遍历所有树节点
   $('.a-TreeView-node').each(function() {
       const $node = $(this);
       // 从节点自定义属性拿类型（需要在SQL里提前设置）
       const nodeType = $node.data('node-type');
       // 替换图标
       if (nodeType === '文件夹') {
           $node.find('.a-TreeView-icon').attr('src', '#APP_IMAGES#folder.png');
       } else if (nodeType === '文档') {
           $node.find('.a-TreeView-icon').attr('src', '#APP_IMAGES#doc.png');
       }
   });
   

3. 注意：得在树的SQL里给节点加自定义数据属性，比如在ATTRIBUTES列里加data-node-type="' || node_type || '"，示例SQL：

   SELECT 
       id AS id,
       parent_id AS parent_id,
       name AS name,
       NULL AS icon,
       'data-node-type="' || node_type || '"' AS attributes
   FROM your_tree_table
   

方法3：CSS类+自定义属性实现 #

给节点加专属CSS类，用CSS替换图标：

1. 在树的SQL查询里，给ATTRIBUTES列加CSS类：

   SELECT 
       id AS id,
       parent_id AS parent_id,
       name AS name,
       NULL AS icon,
       'class="node-' || node_type || '"' AS attributes
   FROM your_tree_table
   

2. 到页面的内联CSS里加样式：

   /* 文件夹节点图标替换 */
   .node-文件夹 .a-TreeView-icon {
       background-image: url(#APP_IMAGES#folder.png) !important;
       background-size: cover;
       background-repeat: no-repeat;
       border: none;
   }
   /* 文档节点图标替换 */
   .node-文档 .a-TreeView-icon {
       background-image: url(#APP_IMAGES#doc.png) !important;
       background-size: cover;
       background-repeat: no-repeat;
       border: none;
   }
   /* 隐藏默认的字体图标 */
   .node-文件夹 .a-TreeView-icon::before,
   .node-文档 .a-TreeView-icon::before {
       content: none;
   }
   

内容的提问来源于stack exchange，提问作者Osman