Oracle APEX:使用Javascript操作交互式网格

1 在页面中添加一个Interactive Grid区域

2 创建一个数据源

为方便起见，我们创建一个不基于实体表和视图的数据源，代码如下:

select
     level as id,
     'N' as ysel,
     lpad(level,4,'0') as itemcode,
     'Decsription  ' || level as itemdesc,
     sysdate as recdate,
     cast(null as varchar2(4000)) as memo 
from dual connect by level <= 3;

3 添加一个按钮，并添加相应的javascript代码

添加相应javascript代码

var model = apex.region("item-line").widget().interactiveGrid("getViews", "grid").model;

col_itemcode = model.getFieldKey("ITEMCODE");
col_itemdesc = model.getFieldKey("ITEMDESC");
col_recdate = model.getFieldKey("RECDATE");
col_ysel = model.getFieldKey("YSEL");
col_id = model.getFieldKey("ID");

model.forEach(function (igrow) {
    apex.item("P99997_ITEMCODE").setValue(igrow[col_itemcode]);
    apex.item("P99997_ITEMDESC").setValue(igrow[col_itemdesc]);
    apex.item("P99997_RECDATE").setValue(igrow[col_recdate]);
    apex.item("P99997_YSEL").setValue(igrow[col_ysel]);
    apex.item("P99997_ID").setValue(igrow[col_id]);
    apex.server.process('populate_collection', {
        pageItems: '#P99997_ITEMCODE,#P99997_ITEMDESC,#P99997_RECDATE,#P99997_ID,#P99997_YSEL'
    }, 
    {
        dataType: 'text',
        success: function (data) {
            if (data != 'SUCCESS'){
                
            };
        }
    });

});

4 再添加一个Action，并且对"被选中的行"进行刷新，如图:

5 再添加一个interactive grid，用于存许被选中的内容

注意: apex_collection的文本字段在apex中默认使用Text Area组件，这会导"致违返唯一性"的报错。

需要将组件类型改为Text Field

6 添加一个Ajax Callback处理

将处理命名为:populate_collection

相应的pl/sql代码

Begin
    If Not apex_collection.collection_exists('ITEM_GRID_DATA') Then
        apex_collection.create_collection('ITEM_GRID_DATA');
    End If;

    if :P99997_YSEL = 'Y' then
        apex_collection.add_member(
            p_collection_name => 'ITEM_GRID_DATA', 
            p_c001 => :P99997_ITEMCODE, 
            p_c002 => :P99997_ITEMDESC, 
            p_d001 => :P99997_RECDATE
        );
    end if;

End;

7 运行效果

选择如图两行

点击"选择"按钮后，被选中的两行，就被选到下方的网格中