1

二つ報告があります。プライマリ レポートの列リンクをクリックすると、その詳細がセカンダリ レポートに表示され、リンクをクリックするとページが更新されます (おそらく、AJAX を使用して 2 番目のレポートのみが更新された場合、次の問題は発生しないでしょうが、これは実装と保守が難しくなります)。

行を強調表示するために、次のような JavaScript 関数があります。

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

ただし、もちろん、ページが更新されたときに行が強調表示されたままになることはありません。可能であれば、pThis のセッション状態を維持したいと考えています。

また、セカンダリ レポートに次のボタンを配置する必要があります。これにより、プライマリ レポートの次の行の詳細が表示され、その行も強調表示されます。

助言がありますか？

4

3 に答える 3

2

すべてのコードを含むサンプルページをまとめました: http://apex.oracle.com/pls/apex/f?p=54687:39

列リンクを説明したかったので、もう少し複雑にしました。リンクをクリックすると、行も強調表示される必要があります。このように、同じページにいる間 (というか、同じ IR ページにいる間) にのみ機能することに注意してください。ページに移動してページネーションをリセットすると、行の色が保持されることに気付きました。まあ、これは良い出発点です。

私が rowindex を使用したのには正当な理由があります。IR の適切な解決策は実際には存在せず、常に非常に多くのカスタム コードが作成されます。実際には、行を一意に識別できる値が必要です。たとえば、非表示の列が HTML でレンダリングされないため、いくつかの問題が発生します。列にある場合、ユーザーが列を非表示にしたり、何らかの方法で html から削除したりできる可能性があります (表示しない、グループ化を適用するなど)。

Matthew 自身の回答を見た後、サンプル アプリケーションのページを編集して、従来のレポートも処理する方法を含めました。ちょっと切り分けてみます。
1）幅を狭めて列を「非表示」にしません。列属性を使用して列を非表示にし、タイプを非表示に変更するだけです。
2) 本当に覚えるつもりがない限り、列項目は必要ありません。しかし、行全体のクリックを許可しない限り、その意味がわかりません (IR の例で行ったように、しかし、従来のレポートではその考えを却下しました)
3) (a+b+c) 私はこれを完全に行いました違う。行要素にクラスを割り当てる方がはるかに優れた方法だと思います。これにより、操作とトラバースが大幅に改善されます。$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);
   };
});
于 2013-01-14T14:35:48.040 に答える
1

Ok。トムが投稿する前に解決策を見つけました。彼のJQueryindex（）関数の使用は素晴らしいです。そのことを前もって知っていたらよかったのに。一方、トムが述べたように、index（）は、ページ付けの場合に使用するのが困難または不可能です。以下はThe ROWID Column Method、

これを2つの回答に分割します。1つはクラシックレポート用、もう1つはIRレポート用です。

以下はCR用です。

1）SQLクエリの最初の列としてROWIDを追加し、そのエイリアス、つまりヘッダーを「」に設定します。従来のレポートでは、列の幅を1に設定し、[列の書式設定]の[CSSスタイル]にを入力しdisplay:none;ます。

2a）次の非表示アイテムをページに追加します：PX_CURRENT_ROW、PX_CURRENT_COLUMN。2b）[次へ]ボタンと[前へ]ボタンが必要な場合は、次のボタンをページに追加します。NEXT、PREVIOUS。

3）aページ設定、JavaScript、およびページ読み込み時に実行で、以下を追加します。

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

3b）ページ設定、JavaScript、および関数と変数の宣言で、3つの関数に次のコードを追加します：identification、highlight、bind_validations。バインドの検証から始めます。バインドの検証では、列のリンクがクリックされたときに列のTDがidentify_row関数に送信されます。レポートのSQLクエリを返すPLSQL関数を使用しているため、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）識別機能が登場しました。これにより、前の関数でバインドされたリンクによって関数に渡された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）次に、次および前のボタンに動的アクションを追加します。[次へ]ボタンの場合は、動的アクションを実行します。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）

于 2013-01-24T00:38:01.107 に答える
0

クッキーを使用してこれを達成できますか？私は非常に便利だと思ったjquerycookieプラグインを使用しました。

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にクラスを追加し、次にクリックされたtrを示すCookieを追加し、ページが読み込まれると、そのクラスをクリックされたtrに再適用します。

私はこれを試したことがないのでうまくいかないことに注意してください、しかしそれはあなたが始めるためのアイデアです。

于 2013-01-10T18:59:57.737 に答える