Oracle Apex：为交互式网格（Interactive Grid）行添加工具提示

针对你基于fruits_t表创建的可编辑交互式网格，以下是两种为每行添加自定义工具提示的实现方法，鼠标悬停香蕉行时可显示对应提示内容：

方法一：通过动态行为实现 #

1. 在页面设计器中，选中目标交互式网格，记录其静态ID（示例中设为ig_fruits）。
2. 点击「创建」→「动态行为」：
   • 名称：IG_Row_Tooltip
   • 事件：选择「鼠标悬停（Mouse Over）」
   • 选择类型：「jQuery 选择器」，输入#ig_fruits tr.aig-row
3. 添加动作：选择「执行JavaScript代码」，输入：

   const grid = apex.region('ig_fruits').widget().interactiveGrid('getViews','grid');
   const rowData = grid.model.getRecord(this.triggeringElement);
   const fruitName = rowData[grid.model.getFieldKey('FRUIT_NAME')];
   const fruitColor = rowData[grid.model.getFieldKey('FRUIT_COLOR')];
   // 生成提示文本，如需中文可自行替换或映射
   const tooltip = `${fruitName.charAt(0).toUpperCase()}${fruitName.slice(1)} is ${fruitColor}`;
   $(this.triggeringElement).attr('title', tooltip);
   

4. 保存动态行为，运行页面即可生效。

方法二：通过页面初始化JavaScript实现 #

1. 打开页面属性，切换到「JavaScript」选项卡，在「执行页面加载时」区域输入：

   $(document).ready(() => {
       const $gridRows = $('#ig_fruits tr.aig-row');
       $gridRows.on('mouseover', function() {
           const grid = apex.region('ig_fruits').widget().interactiveGrid('getViews','grid');
           const rowData = grid.model.getRecord(this);
           const fruitName = rowData[grid.model.getFieldKey('FRUIT_NAME')];
           const fruitColor = rowData[grid.model.getFieldKey('FRUIT_COLOR')];
           // 中文提示示例：
           // const nameMap = { banana: '香蕉', apple: '苹果', lemon: '柠檬' };
           // const colorMap = { yellow: '黄色', red: '红色', green: '绿色' };
           // const tooltip = `${nameMap[fruitName]} 是 ${colorMap[fruitColor]} 的`;
           const tooltip = `${fruitName.charAt(0).toUpperCase()}${fruitName.slice(1)} is ${fruitColor}`;
           $(this).attr('title', tooltip);
       });
   });
   

2. 保存页面设置后运行，鼠标悬停对应行即可看到工具提示。

注意事项 #

• 请将代码中的ig_fruits替换为你实际使用的交互式网格静态ID。
• 若需要HTML格式的富文本提示，可替换原生title属性为APEX的apex.tooltip组件实现更复杂的样式。

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