Oracle Apex - 如何在动态列表中显示图像

Posted 2023-05-09

【中文标题】Oracle Apex - 如何在动态列表中显示图像

【英文标题】：Oracle Apex - How Show Image in a Dynamic List

【发布时间】：2018-01-30 20:02:51

【问题描述】：

我已经为子菜单页面创建了动态列表，现在我想为每个列表条目显示图像

【参考方案1】：

一个不错的功能是使用 Apex Font Awesome 图标。

这是一个基于 Scott 的 DEPT 表的动态列表查询示例：

select 
  null lvl,
  dname,
  '#' target,
  null is_current,
  case when deptno = 10 then 'fa-thumbs-o-up' 
       when deptno = 20 then 'fa-thumbs-o-down'
  end icon
from dept 
order by deptno

当您将列表添加到页面（作为区域）时，导航到其“属性”并通过将“显示图标”属性设置为“对于所有项目”来修改模板选项。

运行页面后，您会看到部门 10 的 拇指向上 图标和部门 20 的 拇指向下。

所有可用图标的列表是here。

【参考方案2】：

答案在创建列表向导的 SQL 页面的示例 1 中：

Example 1:
SELECT null, 
       ENAME label, 
       null target, 
       'YES' is_current, 
       '#APP_IMAGES#del.gif' image, -- <-- HERE
       ' ' image_attrib, 
       ENAME image_alt
FROM  emp 
ORDER BY ename

【参考方案3】：

首先使用如下查询：

select 
  1 level,
  dname label,
  '#' target,
  null is_current,
  'IMAGE'||img_name image
from dept 
order by deptno

将此查询 img_name 设置为每张卡的类。之后在页面加载时使用此 javascript 代码：

var spns = document.getElementsByTagName("span");
for (var i = 0; i < spns.length; i++)                         
 if (spns[i].className.includes('-IMAGE'))  

   spns[i].style.backgroundImage = "url(#IMAGE_PREFIX#"+spns[i].className.substring(5)+")";

  $('.'+spns[i].className.substring(5)).css("background-size", "cover");
         
  

对于这个背景图片 url 应该存在 ords 服务器上的图片。 祝你好运