20210918 - 컬럼 배경색 제어 Highlight Column

1. SQL과 HTML Expression 활용

select ename, sal,

       CASE WHEN sal <= 1500 THEN 'background-color:green' 

            WHEN sal > 1500 AND sal <= 3000 THEN 'background-color:orange'

            WHEN sal > 3000 THEN 'background-color:red'

            ELSE NULL

       END css_style

  from  (  

            select 'John' ename, 1500 sal from dual

            union all

            select 'Maxwell' ename, 3000 sal from dual

            union all

            select 'Nike' ename, 4500 sal from dual

        )

SAL Column - Column Formatting - HTML Expression :

<span data-style="#CSS_STYLE#">#SAL#</span>

Dynamic Action - When

Event : After Refresh

Selection Type : Region

Execute JavaScript Code - Code :

apex.jQuery("span[data-style]").each(

  function()

  { 

    apex.jQuery(this).parent().attr('style', apex.jQuery(this).attr('data-style')); 

  }

);

Fire on Initialization : Checked

** 아니면 SQL에서 CSS 명칭을 지정 후 CSS - Inline 코드 활용하여 색상 변경

ex) select 'bd-green' css_name from dual

2. Javascript Only

1.번과 동일한 Dynamic Action

Execute JavaScript Code - Code :

$("#myStaticIR tbody tr td").each(function(){

   if ($(this).attr('headers') != 'TOT') {

     if (parseInt($(this).text()) <= 1500)

        $(this).css({"background-color":"SandyBrown"});

     else if(parseInt($(this).text()) <= 3000)

        $(this).css({"background-color":"lightgreen"});

     else if(parseInt($(this).text()) > 3000)

        $(this).css({"background-color":"red"});

   }

});

3. CSS Only (컬럼 포맷팅, 특별한 경우 마이너스 '-')

1.번과 동일한 Dynamic Action

Actual Column - Column Formatting - HTML Expression :

<span data-number="#ACTUAL#">#ACTUAL#</span>

CSS - Inline :

span[data-number*="-"] {

    color:red;

}

4. (배경색은 아니지만) 페이지 아이템 강조 색상 변경 Page Item Label, Value

Inline CSS :

label[for="P13_COMMENT"], #P13_REMARK {

  font-size: 16px !important;

  font-weight: bold !important;

  color: red! important;

}

5. 뽀나스 - Hierarchy 구조

select (level*20)-20 the_level,

        empno,ename,mgr

   from emp

connect by prior empno = mgr

  start with mgr is null

<span style="padding-left:#THE_LEVEL#px;">#ENAME#</span>

6. IR column Header

각 항목 SID 설정 후 PAGE CSS : 

#SID_OSTOCK a { color: #D86445; }

#SID_RSTOCK a { color: #D86445; }