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

How to Keep a Row Highlighted after a Page Refreshes in Oracle Apex?

提问by Matthew Moisen

I have two reports. Clicking on a column link in the primary report reveals details about it in the secondary report, and clicking the link refreshes the page (Maybe if only the second report was refreshed using AJAX I wouldn't have the following problem, but I figure this will be harder to implement and maintain).

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

I have a javascript function like this to highlight the row:

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

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

But the row of course does not remain highlighted when the page refreshes. I would love to maintain the session state of pThis, if that is possible.

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

I also have a requirement to place a next button in the secondary report, that would show the details of the next row in the primary report, and highlight that row as well.

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

Any suggestions?

有什么建议？

回答by Tom

I've put together an example page with all code on it: http://apex.oracle.com/pls/apex/f?p=54687:39

我已经将包含所有代码的示例页面放在一起：http: //apex.oracle.com/pls/apex/f?p=54687: 39

I've made it a bit more involved because i wanted to account for a column link. When the link is clicked, the row has to become highlighted aswell. Note that it will only work as long as you remain on the same page (or rather, as long as you are on the same IR page) like this. I now even notice that it'll keep the row colored when you navigate to the page and reset pagination - oh well, this is a good jumping point.

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

I used the rowindex for a good reason: a good solution for an IR doesn't really exist, and will always be very much custom coded. You'd actually need a value(or values) by which you could uniquely identify rows. That gives some problems since for example hidden columns are not rendered in the HTML. If it is in column, it could very well be that users can hide or in some way remove the column from the html (don't display it, apply grouping,...).

我使用 rowindex 有一个很好的理由：一个好的 IR 解决方案实际上并不存在，而且总是非常自定义编码。您实际上需要一个值（或多个值），您可以通过它来唯一标识行。这会带来一些问题，因为例如隐藏的列不会在 HTML 中呈现。如果它在列中，那么用户很可能可以隐藏或以某种方式从 html 中删除该列（不显示它，应用分组，...）。

---

---

I've edited my example application page to include a way to deal with classic reports too, after viewing Matthew's own answer. I'll try to pick it apart a bit.
1) i wouldn't 'hide' my column by reducing the width. Just hide your column using the column attributes and change the type to hidden.
2) you don't really need a column item, unless you really mean to remember that. But i don't really see the point of it unless you allow clicking an entire row (as i did in my IR example, but i dismissed that idea for the classic report)
3) (a+b+c) I did this completely different. I think it is a much better way to assign a class to the row element, as this allows much better manipulation and traverse. The $x_RowHighlightfunction adds a styleattribute to the tdelements, and i don't like that. Controlling the style through a class and CSS is much more versatile.
I'd also argue that AJAX is not required here! When you click the link, you can directly set the item value and not go through an ajax call. I'd also argue that this does not need to be a synchronous call (which htmldb_Get is by default), but can be asynchronous as to not make the browser wait for a return (there is none).
Nevertheless, you could require ajax if you want to set it up as in my IR example so that clicking anywhere on a row would select the row.
As for selecting the next row: in my example you'd need to replace the changing of the input item to a click on the link column - shouldn't be to hard!

在查看了 Matthew 自己的回答后，我编辑了我的示例应用程序页面，以包含一种处理经典报告的方法。我会试着把它拆开一点。
1）我不会通过减少宽度来“隐藏”我的列。只需使用列属性隐藏您的列并将类型更改为隐藏。
2）你真的不需要一个列项目，除非你真的想记住这一点。但我真的不明白它的意义，除非你允许点击整行（就像我在我的 IR 示例中所做的那样，但我驳回了经典报告的这个想法）
3）（a+b+c）我完全做到了不同的。我认为将类分配给行元素是一种更好的方法，因为这允许更好的操作和遍历。该$x_RowHighlight函数将一个style属性添加到td元素，我不喜欢那样。通过类和 CSS 控制样式更加通用。
我还认为这里不需要 AJAX！当您点击链接时，您可以直接设置项目值，而不需要通过 ajax 调用。我还认为这不需要是同步调用（默认情况下 htmldb_Get 是），但可以是异步的，以免浏览器等待返回（没有）。
不过，如果您想在我的 IR 示例中设置它，则可能需要 ajax，以便单击行上的任意位置将选择该行。
至于选择下一行：在我的示例中，您需要将输入项的更改替换为单击链接列 - 应该不会太难！

---

---

Performing an async call with htmldb_Get:

使用 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);
   };
});

回答by Matthew Moisen

Ok. I found a solution before Tom posted his. His use of the JQuery index() function is fantastic; I wish I had known about that before hand. On the other hand, like Tom mentioned, the index() would be difficult or impossible to use in the event of pagination. What follows is The ROWID Column Method,

行。我在汤姆发布他的之前找到了一个解决方案。他对 JQuery index() 函数的使用非常棒；我希望我事先知道这一点。另一方面，就像汤姆提到的那样，在分页的情况下， index() 将很难或不可能使用。接下来是The ROWID Column Method，

I will split this into 2 answers, one for Classic Reports, and one for IR reports.

我将把它分成 2 个答案，一个用于经典报告，一个用于 IR 报告。

What follows is for CR.

以下是针对 CR 的。

1)Add a rowid as the first column in the SQL query and set its alias and thus header to " ". In a classic report, set the column width to 1, and under Column Formatting, in CSS Style, put display:none;.

1) 在 SQL 查询中添加一个 rowid 作为第一列，并将其别名和标题设置为“”。在经典报表中，将列宽设置为 1，然后在“列格式”下的“CSS 样式”中，将display:none;.

2a)Add the following hidden items to your page: PX_CURRENT_ROW,PX_CURRENT_COLUMN. 2b)If you want a Next and Previous button, and add the following buttons to your page: NEXT, PREVIOUS.

2a) 将以下隐藏项目添加到您的页面：PX_CURRENT_ROW, PX_CURRENT_COLUMN。2b)如果您想要下一个和上一个按钮，请将以下按钮添加到您的页面：NEXT, PREVIOUS。

3)a In the page settings, under JavaScript, and in Execute when Page Loads, add the following:

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

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

3b) In the page settings, under JavaScript, and in Function and Variable Declaration, add the following code for the three functions: identification, highlight, and bind_validations. We will start with the bind validations, which sends the TD of the column when the column link is clicked to the identify_row function. I am using a PLSQL function returning a SQL query for my reports, so all column headers as ID'd by JQuery are generic COL0x. Use an array with your column headers if you are using a regular query.

3b) 在页面设置中，在 JavaScript 下，在函数和变量声明中，为三个函数添加以下代码：标识、突出显示和绑定验证。我们将从绑定验证开始，当列链接被点击到 identify_row 函数时，它会发送列的 TD。我正在使用一个 PLSQL 函数为我的报告返回一个 SQL 查询，因此所有列标题作为 JQuery 的 ID 都是通用的 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) Now comes the identification function. This highlights the row temporarily before the page loads (nice effect for lag, as it lets the user know that row will be activated) using $x_UpTill on the TD passed to the function by the links that were binded in the previous function.

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 Here is the highlight function:

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) Now add dynamic actions on the next and previous buttons. For the NEXT button, do a dynamic action: Execute JavaScript Code, don't fire on page load:

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');
    }
});

For the previous button change the condition to: `if (parseInt(nextRownum) == parseInt(currentRownum) - 1)

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

回答by dev

Could you achieve this with using cookies? I've used the jquery cookie pluginwhich I've found very useful.

您可以通过使用 cookie 来实现这一目标吗？我使用了jquery cookie 插件，我发现它非常有用。

I don't know anything about oracle-apex, but below is a basic javascript/jquery solution that might work,

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

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

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

Basically adding a class to the clicked tr, then adding a cookie to say which is the clicked tr, and then when the page loads it reapplies that class to the clicked tr.

基本上是向点击的 tr 添加一个类，然后添加一个 cookie 来说明哪个是点击的 tr，然后当页面加载时，它会将该类重新应用于点击的 tr。

Please note I haven't tried this so It wont work, but it's an idea to get you started.

请注意，我还没有尝试过这个，所以它不会工作，但这是一个让你开始的想法。