时间戳

首页 > 解决方案 > APEX 树区域转义特殊字符

tree - APEX 树区域转义特殊字符

问题描述

我试图使我的树中的结果文本加粗，但前提是它们匹配特定的条件，所以在 sql 查询中，我在 select 语句中尝试了这两个选项：

'<div class="TFLBOLD">'||A.NAME||' - Nivel - '||level||'</div>'

'<b>'||A.NAME||' - Nivel - '||level||'</b>''

在第一个上，我试图创建一个类来在 css 页面中分配粗体样式。

我已经将选项“转义特殊字符”标记为“否”，但它仍然没有将文本加粗，它看起来像这样：

树图像

树区域类型上的此选项有任何问题或错误吗？当条件匹配时，还有另一种方法可以在我的 Tree 区域中使文本变为粗体？

注意：在报告区域中，该选项可以正常工作！

这是我的树代码 tree_code的打印

标签： treeoracle-apex

解决方案

我遇到了类似的问题，这是 John Snyders 的回答：

节点可以有图标，图标可以表示不同种类的节点。这是图标的主要目的，也是区分树中不同类型分支的最简单方法。没有将类添加到节点的声明方式，但可以使用自定义 javascript 来完成。

以下是如何将特定类添加到节点内容（使用 EMP 表上的典型树）。这是我用来在节点中获取比 Tree 区域支持的更多信息的通用技术。我将额外的数据放入工具提示中，然后在树初始化时提取它。

在树区域 sql 中添加一列来保存所需的类。例子：

case when job = 'SALESMAN' then 'sales' else '' end as node_class,

对于工具提示，选择 HTML 表达式并输入：

&NODE_CLASS.|Job: &JOB.<br> Salary: &SAL.

请注意，工具提示包含由 | 分隔的类和工具提示。特点。

在高级 JavaScript 初始化代码中输入：

function(options) { function traverse( n ) { var i, tta = n.tooltip ? n.tooltip.split("|") : [];

    if (tta.length === 3) {
        n.classes = tta[0];
        n.job = tta[1];
        n.tooltip = tta[2];
    }
    if ( n.children ) {
        for ( i = 0; i < n.children.length; i++ ) {
            traverse( n.children[i] );
        }
    }
}

options.makeNodeAdapter = function(data, types, hasIdentity) {
    var nodeAdapter;
    // split the classes out of the tooltip property
    traverse(data);
    nodeAdapter = $.apex.treeView.makeDefaultNodeAdapter( data, types, hasIdentity );
    nodeAdapter.renderNodeContent = function(node, out, options, state) {
        if ( options.nodeSelector > 0 ) {
            // simulate a checkbox or radio button depending on single/multiple selection
            cls = "u-selector"; // ++ replace constant
            if ( options.nodeSelector === 1 ) {
                cls += " u-selector--single";
            }
            out.markup('<span class="' + cls + '"></span>');
        }
        if ( nodeAdapter.getIcon ) {
            icon = nodeAdapter.getIcon( node );
            if ( icon !== null ) {
                out.markup( "<span" ).attr( "class", options.iconType + " " + icon ).markup( "></span>" );
            }
        }
        link = options.useLinks && nodeAdapter.getLink && nodeAdapter.getLink( node );
        if ( link ) {
            elementName = "a";
        } else {
            elementName = "span";
        }
        out.markup( "<" + elementName + " tabIndex='-1' role='treeitem'" ).attr( "class", options.labelClass )
            .optionalAttr( "href", link )
            .attr( "aria-level", state.level ) // ++ replace constant
            .attr( "aria-selected", state.selected ? "true" : "false" ) // ++ replace constant
            .optionalAttr( "aria-disabled", state.disabled ? "true" : null ) // ++ replace constant
            .optionalAttr( "aria-expanded", state.hasChildren === false ? null : state.expanded ? "true" : "false" ) // ++ replace constant
            .markup( ">" )
            .content( nodeAdapter.getLabel( node ) )
            .markup( " <span class='job'>") // ++ add span for job
            .content( node.job ) // ++
            .markup( "</span></" + elementName + ">" ); // ++ close the span
    };
    return nodeAdapter;
};
return options;
}

上面的大部分代码都与之前的类似或从 treeView 小部件中复制而来。traverse 函数将工具提示分成 3 个部分。已修改的 nodeAdapter 行用 // ++ 标记。最有趣的变化是添加跨度和作业。

添加另一个 CSS 规则，例如：

.a-TreeView-label .job { text-transform: lowercase; font-style: italic; }

这应该做。将最后一行的 css 规则更改为您控制行为的需要。

推荐阅读