Oracle APEX树节点如何根据TYPE列条件设置文本颜色？

我需要根据树数据源中的TYPE列值为节点设置不同文本颜色，但当前JavaScript代码无法访问TYPE字段——因为Apex树默认不会将所有字段数据保存到客户端模型中。

现有代码 #

树区域初始化JavaScript代码 #

function( options ) {
    options.makeNodeAdapter = function(data, types, hasIdentity) {
        types.default.classes = "u-color-1-text"
    var a
    a = $.apex.treeView.makeDefaultNodeAdapter( data, types );
    return a;
  }
    return options;
}

树数据源SQL代码 #

select  
    CASE
        WHEN CONNECT_BY_ISLEAF = 1 THEN 0
        ELSE 1
    END AS NODE_STATUS,
    LEVEL,
    ID as ID,
    NAME as title,
    PARENT_ID AS PARENT_ID,
    DESCRIPTION as tooltip,
    ICON_HTML  as icon,
    TYPE
from TABLE_T
start with PARENT_ID is null
connect by prior ID = PARENT_ID
order siblings by ID ASC;

解决步骤 #

1. 修改SQL，将TYPE字段传递到客户端 #

Apex树支持通过DATA别名字段传递自定义数据到客户端。我们可以把TYPE值嵌入这个字段，这里用JSON格式确保数据结构清晰：

select  
    CASE
        WHEN CONNECT_BY_ISLEAF = 1 THEN 0
        ELSE 1
    END AS NODE_STATUS,
    LEVEL,
    ID as ID,
    NAME as title,
    PARENT_ID AS PARENT_ID,
    DESCRIPTION as tooltip,
    ICON_HTML  as icon,
    -- 新增DATA列，传递TYPE值到客户端
    '{"type":"' || REPLACE(TYPE, '"', '\"') || '"}' as DATA,
    TYPE
from TABLE_T
start with PARENT_ID is null
connect by prior ID = PARENT_ID
order siblings by ID ASC;

注：用REPLACE转义TYPE中的双引号，避免JSON格式错误；如果TYPE不含特殊字符，也可以直接用TYPE as DATA简化写法。

2. 修改JavaScript代码，根据TYPE设置颜色 #

在makeNodeAdapter函数中，data参数会包含我们传递的DATA字段，解析后即可获取TYPE值，再根据不同TYPE设置对应的文本颜色类：

function( options ) {
    options.makeNodeAdapter = function(data, types, hasIdentity) {
        // 解析DATA字段获取TYPE
        var nodeType = data.DATA;
        // 如果用了JSON格式，就用下面这行替换上面的
        // var nodeType = data.DATA ? JSON.parse(data.DATA).type : '';
        
        // 根据TYPE设置对应颜色类
        if (nodeType === 'TYPE_A') {
            types.default.classes = "u-color-1-text";
        } else if (nodeType === 'TYPE_B') {
            types.default.classes = "u-color-2-text";
        } else if (nodeType === 'TYPE_C') {
            types.default.classes = "u-color-3-text";
        } else {
            types.default.classes = "u-color-default-text"; // 默认样式
        }
        
        var a = $.apex.treeView.makeDefaultNodeAdapter( data, types );
        return a;
    }
    return options;
}

补充说明 #

确保你的Apex应用中已定义对应的颜色类（如u-color-2-text、u-color-3-text），可以通过页面内联CSS或主题样式添加这些类的具体颜色规则。

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