如何使用 apex-d3-organization-chart 插件

How to use apex-d3-organization-chart plugin

我想用 apex-d3-organization-chart 插件创建一个组织结构图。 我添加了这个插件,然后我创建了一个页面并插入了一个区域并将其更改为这个插件。 在该地区的源代码部分写了这段代码:

SELECT
       /* positive number id of the element (should start with 1 or higher) */
       ROWNUM                          AS ID,
       /* positive number id of the parent (top parent should be 0) */
       CASE
         WHEN ROWNUM <= 1 THEN 0
         WHEN ROWNUM <= 4 THEN 1
         ELSE ROUND(ROWNUM / 4)
       END                             AS PARENT_ID,
       /* name of the item */
       'Item '
       || ROWNUM                       AS NAME,
       /* tooltip for the item */
       'This is item '
       || ROWNUM                       AS TOOLTIP,
       /* link of the item (is only used when is leaf) */
       'https://github.com/RonnyWeiss' AS LINK,
       /* color of the item */
       DECODE(ROWNUM, 1, 'rgba(192,0,15,1)', NULL) AS COLOR
FROM   DUAL
CONNECT BY ROWNUM <= 30 

现在我想改变它并使用我的 table。 我该怎么做?

首先在 SQL 命令和 运行 中复制该查询。现在您可以看到带有一些字段的 table。现在编写一个 select 查询,其字段与源查询完全相同。 类似的东西:

    SELECT 
    ID,
    PARENT_ID,
    TITLE as NAME,
    CASE WHEN 
    PARENT_ID=0 THEN 'rgba(192,0,15,1)'
    ELSE 'rgba(0,0,250,1)'
    END as COLOR
    FROM TLX_USER_ROLE
    ORDER BY PARENT_ID asc