APEX 23.1中实现Interactive Grid价格列实时求和并复用结果

针对你的需求，以下是无需提交页面、实时计算price列总和且支持结果复用的实现方案，兼容APEX 23.1版本：

核心实现逻辑 #

利用Interactive Grid（IG）的模型事件监听机制，在记录新增、修改、删除时实时遍历所有行的price值计算总和，同时将结果存储到全局变量或页面项中，方便后续代码/逻辑复用。

具体代码实现 #

1. 页面级JavaScript代码 #

将以下代码添加到页面的JavaScript > Function and Global Variable Declaration区域：

// 全局变量存储price列总和，供其他逻辑直接调用
let gPriceTotal = 0;

function initIGRealTimeSum() {
    // 替换为你的IG静态ID
    const igStaticId = "YOUR_IG_STATIC_ID";
    // 获取IG的网格视图模型
    const igGrid = apex.region(igStaticId).widget().interactiveGrid("getViews", "grid");
    const igModel = igGrid.model;

    // 计算总和的核心函数
    function calculateTotal() {
        let total = 0;
        // 遍历所有有效记录
        igModel.forEach(record => {
            const priceVal = parseFloat(record.getValue("PRICE"));
            // 过滤非数值的情况
            if (!isNaN(priceVal)) {
                total += priceVal;
            }
        });
        // 更新全局变量
        gPriceTotal = total;
        // 可选：更新页面项（比如P1_TOTAL_PRICE），支持后端逻辑复用
        apex.item("P1_TOTAL_PRICE").setValue(total.toFixed(2));
        // 可选：更新页面上的显示元素（比如IG下方的总和提示）
        const totalEl = document.getElementById("ig-price-total");
        if (totalEl) {
            totalEl.textContent = `Price总和: ${total.toFixed(2)}`;
        }
    }

    // 页面初始化时计算一次初始总和
    calculateTotal();

    // 监听模型变化事件：新增、修改、删除记录时触发
    igModel.on("model:recordChange", event => {
        // 仅当PRICE字段变化，或记录新增/删除时重新计算
        if (event.changes?.PRICE || event.type === "create" || event.type === "remove") {
            calculateTotal();
        }
    });
}

2. 页面加载触发初始化 #

将以下代码添加到页面的JavaScript > Execute When Page Loads区域：

initIGRealTimeSum();

配置说明 #

1. 替换IG静态ID：将代码中的YOUR_IG_STATIC_ID替换为你的Interactive Grid组件的静态ID（在IG属性的"Advanced"标签下查看）。
2. 页面项配置（可选）：如果需要后端逻辑复用总和，创建一个页面项（比如P1_TOTAL_PRICE），类型设为Hidden或Display Only，代码会自动更新其值。
3. 前端显示配置（可选）：在IG下方添加一个HTML区域，设置其ID为ig-price-total，用来实时展示总和，示例HTML内容：

   <div style="margin-top:10px; font-weight:bold;" id="ig-price-total"></div>
   

结果复用方式 #

• 前端JavaScript复用：直接调用全局变量gPriceTotal即可获取当前最新总和，比如在其他按钮的点击事件、自定义验证逻辑中使用。
• 后端逻辑复用：如果配置了页面项（如P1_TOTAL_PRICE），提交页面后可在PL/SQL代码中通过:P1_TOTAL_PRICE获取总和值。

方案优势 #

• 完全实时响应：无需提交页面，修改price值后立即更新总和。
• 兼容性强：适配APEX 23.1及更高版本，IG模型事件机制稳定可靠。
• 灵活复用：总和结果同时支持前端和后端逻辑调用。

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