时间戳

首页 > 解决方案 > ORACLE APEX 报告模板中的可单击 DIV 不起作用

oracle - ORACLE APEX 报告模板中的可单击 DIV 不起作用

问题描述

我正在为生成 div 的报告使用自定义命名列模板。我需要使整个 DIV 成为一个超链接，我相信 HTML5 支持。

我的行模板如下：

<div class="kpi_section_header">    
    <div>        
        <span>#PROC_NAME#</span>
    </div>
    <div>
        <i class="fa fa-dashboard fa-lg" aria-hidden="true"></i>    
    </div>
</div>

<a style="display:block" href="f?p=&APP_ID.:2:&APP_SESSION.::NO:RP,2:P2_KPI_ID,P2_KPI_NUM:#KPI_ID#,#KPI_NUM#"> 
<div class="#UI_ON_TARGET_CARD_CLASS#">
<div class="kpi_card_title">#KPI_NAME#

    </div>


<div class="kpi_card_detail">
    <table class="kpi_card_table">
                <tr>
                        <td>Target:</td>
        <td><span>#UI_TARGET_DESC#</span></td>
                </tr>
                <tr>
                        <td>Month:</td>
        <td><span>#UI_LATEST_MONTH#</span></td>
                </tr>                   
        </table>

</div>
    <div class="kpi_card_status_container">
        <table class="kpi_card_status_table">           
                <tr>
                    <td colspan="2" rowspan="2" class="kpi_card_value_cell">
            <span class="card_metric_value" style="color:#UI_ON_TARGET_COLOUR#;">#METRIC_VALUE#</span><br/>
                    <span class="card_metric_unit"  style="color:#UI_ON_TARGET_COLOUR#;">#UI_VALUE_UNIT#</span>

                </td>
                <td class="kpi_card_trend_cell">
            <span class="#KPI_TREND_ICON#"></span>
        </td>
            </tr>
            <tr>
                    <td class="kpi_card_trend_cell">
            <span class="kpi_metric_badge">#UI_TREND#</span>
        </td>
        </tr>

        </table>

    </div>
</div>
</a>

但是当我查看正在生成的源时，锚标记被过早关闭。

在此处输入图像描述

标签： oracleoracle-apex

解决方案

虽然我无法解决 APEX 模板中的问题，但我能够使用本文使用 javascript 解决问题。

javascript 可点击 div 文章。

基本上我把它放在页面的“功能和全局声明”部分：

$(document).ready(function() {
  $("[data-link]").click(function() {
    window.location.href = $(this).attr("data-link");
    return false;
  });
});

在我的 row_template 中：

 <div class="#UI_ON_TARGET_CARD_CLASS#" data-link="f?p=&APP_ID.:2:&APP_SESSION.::NO:RP,2:P2_KPI_ID,P2_KPI_NUM:#KPI_ID#,#KPI_NUM#">

所以将URL添加到div的data-link属性中，jquery选择器只对带有data-link属性的dom元素进行操作。

推荐阅读