1

製品のリストがあり、各製品の色を交互に変えようとしています (灰色、白、灰色、白など)。次のリンクのような条件に基づいて色の書式設定を使用する方法を理解しています。ただし、レポートの前の行を見て、同じ製品名を保持しているかどうかを確認する方法がわかりません。一致する場合は、行を同じ色に、そうでない場合は別の色に色付けします。
アプリケーションでサンプル レポートをセットアップしました: Application 67666 - Color Row by Product example。レポートには 2 つの製品があるため、3 つの灰色の線と 3 つの白い線を取得しようとしています。さらに製品がある場合は、灰色に戻ります。

リンク:apex.oracle.com

ワークスペース: アプリ 2

ユーザー: ユーザー

パスワード: DynamicAction2

正しい方向に向けてください.

4

1 に答える 1

0

本当にjavascript以外の解決策は考えられません。sql でラグを使用している可能性がありますが、行の色を変更する場所を決定するためにのみ使用します。列の html 式で列の値を使用してクラスに入れることはできますが、それでも javascript で繰り返し処理する必要があります。そのため、javascript を使用する方が手間がかからないようです。

インライン CSS:

table.report-standard tr.normalRow td{
background-color: green;
}
table.report-standard tr.altRow td{
background-color: red;
}

これはデフォルトのスタイルをオーバーライドしますが、必要に応じてこれを調整する必要があります。たとえば、行の :hover で色が変わります。私は、クラスを割り当ててスタイルを操作し、CSS でルールを定義する方が、JavaScript を介して直接 CSS を割り当てるよりも好みます (スタイル タグに配置されます)。

  • 動的アクション: 行の色を変更する
  • 更新後、地域、製品レポート

  • 実際のアクション: JavaScript コードを実行し、ページの読み込み時に起動することを確認

    $('td[headers="PRODUCT"]', this.triggeringElement).each(function(){
var lCurrRow = $(this).closest('tr'),
    lPrevRow = lCurrRow.prev(), 
    lPrevVal = lPrevRow.find('td[headers="PRODUCT"]').text();
console.log(lPrevVal + ' - ' + $(this).text());
//if value on previous row differs from the that on the current row
//then change the class
//if the value didnt change, then use the same class as the previous row
if ( lPrevVal != $(this).text() ){
  if ( lPrevRow.hasClass('normalRow') ){
    lCurrRow.addClass('altRow');
  } else {
    lCurrRow.addClass('normalRow');
  };
} else {
  if ( lPrevRow.hasClass('normalRow') ){
    lCurrRow.addClass('normalRow');
  } else {
    lCurrRow.addClass('altRow');
  };
};
})

apex.oracle.com でソリューションを確認してください。そこに実装しました。

于 2013-04-28T17:27:25.803 に答える