如何在Oracle Apex中刷新页面后突出显示一行?

时间:2013-01-10 18:21:26

标签: javascript jquery oracle-apex

我有两份报告。单击主报表中的列链接会在辅助报表中显示有关它的详细信息,然后单击该链接会刷新页面(如果只使用AJAX刷新了第二个报表,我就不会遇到以下问题,但我认为这样会更难实施和维护。)

我有一个像这样的javascript函数来突出显示行:

function highlight(pThis) {
    $x_RowHighlight($x_UpTill(pThis,'TR'), 'pink');
}

但是当页面刷新时,该行当然不会保持突出显示。如果可能的话,我很想保持pThis的会话状态。

我还要求在辅助报告中放置下一个按钮,该按钮将显示主报告中下一行的详细信息,并突出显示该行。

有什么建议吗?

3 个答案:

答案 0 :(得分:2)

我整理了一个包含所有代码的示例页面:http://apex.oracle.com/pls/apex/f?p=54687:39

我让它更加复杂,因为我想要考虑列链接。单击链接时,该行也必须突出显示。请注意,只有您保持在同一页面上(或者更确切地说,只要您在同一个IR页面上),它才会起作用。我现在甚至注意到当你导航到页面并重置分页时它会保持行颜色 - 哦,这是一个很好的跳跃点。

我使用rowindex是有充分理由的:一个很好的IR解决方案并不存在,并且总是会自定义编码。您实际上需要一个值(或多个值)来唯一标识行。这会产生一些问题,因为例如隐藏列不会在HTML中呈现。如果它在列中,很可能是用户可以隐藏或以某种方式从html中删除列(不显示它,应用分组,...)。


我已经编辑了我的示例应用程序页面,以便在查看Matthew自己的答案后也包含一种处理经典报告的方法。我会尝试分开一点。
1)我不会通过减小宽度来“隐藏”我的列。只需使用列属性隐藏列,然后将类型更改为隐藏 2)你真的不需要一个列项,除非你真的想要记住它。但我真的没有看到它的重点,除非你允许点击整行(正如我在我的IR示例中所做的那样,但我对经典报告的想法不予理解)
3)(a + b + c)我这样做完全不同。我认为将一个类分配给row元素是一种更好的方法,因为这样可以更好地操作和遍历。 $x_RowHighlight函数会向style元素添加td属性,我不喜欢这样。通过类和CSS控制样式更加通用 我还认为这里不需要AJAX!单击该链接时,可以直接设置项值,而不是通过ajax调用。我还认为这不需要是一个同步调用(默认情况下htmldb_Get),但可以是异步的,不要让浏览器等待返回(没有)。
不过,如果你想在我的IR示例中设置它,你可以要求ajax,这样点击一行中的任何地方都会选择该行。
至于选择下一行:在我的例子中,您需要将输入项的更改替换为链接列上的单击 - 不应该很难!


使用htmldb_Get执行异步调用:

var ajaxRequest = new htmldb_Get(null, $v("pFlowId"), "APPLICATION_PROCESS=some_process", $v("pFlowStepId"));
ajaxRequest.addParam("x01","some value"); -- adds a parameter to the request, good for the x## variables
ajaxRequest.add("P1_EMPNO", "some value"); -- adds the key-value to p_args_names en values: page items!
ajaxRequest.getAsync(function(pResponse){
   if(pResponse.readyState==4&&pResponse.status==200){
      //call finished successfully
      console.log(pResponse.responseText);
   };
});

答案 1 :(得分:1)

确定。在Tom发布他之前我找到了解决方案。他使用JQuery index()函数非常棒;我希望我事先了解这一点。另一方面,就像Tom提到的那样,在分页的情况下,索引()很难或不可能使用。以下是The ROWID Column Method

我将此分为2个答案,一个用于经典报告,另一个用于IR报告。

以下是CR。

1)添加一个rowid作为SQL查询中的第一列,并设置其别名,从而将标题设置为“”。在经典报告中,将列宽设置为1,在“列格式”下,在“CSS样式”中,放置display:none;

2a)将以下隐藏的项目添加到您的网页:PX_CURRENT_ROWPX_CURRENT_COLUMN。 2b)如果您需要“下一个”和“上一个”按钮,并在页面中添加以下按钮:NEXTPREVIOUS

3)a在页面设置中,在JavaScript下,在页面加载时执行时,添加以下内容:

bind_validations(); //Tom will note whom I have learned my APEX/JQ tactics from :)
highlight();

3b)在页面设置中,在JavaScript下,在“函数和变量声明”中,为三个函数添加以下代码:identification,highlight和bind_validations。我们将从绑定验证开始,当列链接被单击到identify_row函数时,它将发送列的TD。我正在使用PLSQL函数为我的报告返回一个SQL查询,因此JQuery标识的所有列标题都是通用的COL0x。如果您使用常规查询,请使用包含列标题的数组。

function bind_validations() {
    var columnHeader = 'COL0';
    for (var i = 2; i <10; i++) {
        columnHeader = 'COL0' + i;
        $("td[headers='" + columnHeader + "']").find('a').each(function(){
            $(this).click(function(){
                if ($(this).text.length != 0) { //necessary for next/previous buttons 
                    identification(this);
                    window.location.href=this.href; //necessary for next/previous buttons
                }
            });
        });
    }
}

3b)现在出现识别功能。这会在页面加载之前暂时突出显示该行(对于滞后效果很好,因为它让用户知道该行将被激活),使用前一个函数中绑定的链接传递给函数的TD上的$ x_UpTill。

function identification(pThis) {
    var currentColumn = $x_UpTill(pThis, 'TD');
    var currentColumnHeader = $(currentColumn).attr('headers');
    var currentRow = $x_UpTill(pThis,'TR');
    var currentRownum = $(currentRow).find("td[headers='COL01']").text(); 
    $x_RowHighlight(currentRow, 'pink');

    //AJAX
    /* As Tom mentions, AJAX is unnecessary: use f?p via column links instead. 
    In my particular situation, the idiosyncrasies render the passing of values
    through f?p inappropriate. The purpose of passing the column header is for
    the previous/next buttons, which will activate blank columns otherwise if 
    everyone of your columns has a link on it.
    */
    var get = new htmldb_Get(null, &APP_ID., 'APPLICATION_PROCESS=dummy', &APP_PAGE_ID.);
    get.add('PX_CURRENT_COLUMN' , currentColumnHeader);
    get.add('PX_CURRENT_ROW', currentRownum);
    gReturn = get.get();
    get = null;
}

3)c这是高亮功能:

function highlight() {
    var currentRownum = $v('PX_CURRENT_ROW')
    $("tr").each(function() {
        var rownum = $(this).find("td[headers='COL01']").text(); //Use ' ' if you don't have generic columns like I do
        if (parseInt(rownum) == parseInt(currentRownum)) $x_RowHighlight(this, 'red');
    });
}

4)现在在下一个和上一个按钮上添加动态操作。对于NEXT按钮,执行动态操作:执行JavaScript代码,不要在页面加载时触发:

var currentRownum = $v('PX_CURRENT_ROW');
var currentColumnHeader = $v('PX_CURRENT_COLUMN');
$("tr").each(function() {
    var nextRownum = $(this).find("td[headers='COL01']").text();
    if (parseInt(nextRownum) == parseInt(currentRownum) + 1) { //use -1 for the previous button
        $(this).find("td[headers='" + currentColHeader + "']").find('a').trigger('click');
    }
});

对于上一个按钮,将条件更改为:`if(parseInt(nextRownum)== parseInt(currentRownum) - 1)

答案 2 :(得分:0)

使用Cookie可以实现这一目标吗?我已经使用了我发现非常有用的jquery cookie plugin

我对oracle-apex一无所知,但下面是一个可能有效的基本javascript / jquery解决方案,

    $("tr").click(function (){ 
        var activeTR = function (){ 
            $(this).addClass('.active');
            $.cookie("activeTR","activated",({ expires:7, path: '/' }));
        };
    });

    if ($.cookie("activeTR") == "activated"){activeTR()}

基本上将一个类添加到单击的tr中,然后添加一个cookie来说明哪个是单击的tr,然后在页面加载时将该类重新应用于单击的tr。

请注意我没有尝试这样做它不会工作,但这是一个让你入门的想法。