A34 body.CellDynamicStyles

들어가며

이번 강좌에서는 A31 DynamicStyle 개요 에서 설명 드렸던 body.cellDynamicStyles에 대하여 조금 더 자세히 배워보도록 하겠습니다.

이론

오늘 배울 바디 셀 다이나믹 스타일의 특징은 하나의 셀(Cell)에 스타일이 적용된다는 것이 특징 입니다.
cellDynamicStyles의 사용 용도는 전체 데이터 중 특정 조건에 맞는 셀들에게 특정한 스타일을 적용하고 싶을때 사용합니다.

동작 원리는 각각의 셀들이 그려질때 cellDynamicStyles에 사용한 수식을 적용 합니다. 그렇기에 판단 조건은 자기 자신의 셀 값만 가지고 판단하거나 자신의 셀 값과 다른 셀의 값을 가지고 판단하게 끔 사용하여야 합니다. 다른 셀 값으로만 판단하게 된다면 이전 강좌에서 배운 body.dynamicStyles와 동일한 동작을 하게 됩니다. (한 행에 모두 스타일이 적용됨)

그리고 전체 영역중 일부 컬럼들만 제외하고 적용시킬 수는 없습니다. 조건에 맞는 모든 셀들에게 스타일이 적용됩니다. 이런 경우는 A32 column.DynamicStyles를 사용하여야 합니다.
(물론 조건에 의해서 셀 데이터를 구분해낼 수 있다면 가능합니다. 그러나 그리드 자체 기능으로 특정 컬럼을 제외할 수는 없습니다.)

실습을 통해 바디 셀 다이나믹 스타일의 예제를 만들어 보면서 배워보도록 하겠습니다.

실습

이전 강좌에서 말했듯이 다이나믹 스타일을 적용하는 방법은 두가지가 있습니다. criteria, function(){} 이 둘 중 편한 방법을 선택하여 사용하시면 됩니다.

여러개의 조건이 필요한 경우 A32 column.DynamicStyles에서 배운것과 같이 다이나믹 스타일 객체를 arr 형태로 지정하시면 됩니다.(function()인 경우는 if문을 사용하여 분기처리)

적용할 수 있는 criteria들은 Expression 에서 Row Dynamic Styles에서 확인하세요.

criteria 방식을 사용하여 100인 데이터는 녹색, 60이하인 데이터는 빨강색 스타일을 적용해보도록 하겠습니다.

gridView.setStyles({
    body:{
        cellDynamicStyles:[{
            criteria:"value = 100", 
            styles:{
                background:"#FF00FF00"
            }
        }, {
            criteria:"value <= 60", 
            styles:{
                background:"#FFFF0000"
            }                
        }]
    }
});

function(){} 방식을 사용하여 80인 데이터는 파란색, 70인 데이터는 노란색 스타일을 적용해보도록 하겠습니다.

 gridView.setStyles({
     body:{
         cellDynamicStyles: function (grid, index, value) {
             var styles = {};

             if (value == 80) {
                 styles.background = "#FF0000FF"
             } else if (value == 70) {
                 styles.background = "#FFFFFF00"
             }

             return styles;
         }
            
     }
 });

셀의 값이 ‘배우’인 셀에 빨강색 스타일을 적용해보도록 하겠습니다.

 gridView.setStyles({
     body:{
         cellDynamicStyles:[{
             criteria:"value = '배우'", 
             styles:{
                 background:"#FFFF0000"
             }            
         }]
     }
 });

criteria를 values['field1'] = '배우' 로 변경하면 어떻게 될까요? 결과는 한 행 모두 스타일이 적용되게 됩니다. 실습 3번과 차이를 이해하셔야 합니다.(셀들이 그려질때 cellDynamicStyles에 적용한 수식이 적용)
```
 gridView.setStyles({
     body:{
         cellDynamicStyles:[{
             criteria:"values['field1'] = '배우'", 
             styles:{
                 background:"#FFFF0000"
             }            
         }]
     }
 }); 
 
```

실행화면

100인 데이터는 녹색, 60이하인 데이터는 빨강색 스타일
80인 데이터는 파란색, 70인 데이터는 노란색 스타일
셀의 값이 ‘배우’인 셀에 빨강색 스타일을 적용
criteria를 values['field1'] = '배우' 로 변경

전체 소스코드

SCRIPT

<script type="text/javascript" src="/script/realgridjs-lic.js"></script>
<script type="text/javascript" src="/script/realgridjs_eval.1.1.31.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.1.31.js"></script>

<script>
var gridView;
var dataProvider;

$(document).ready( function() {

    RealGridJS.setTrace(false);
    RealGridJS.setRootContext("/script");
    
    dataProvider = new RealGridJS.LocalDataProvider();
    gridView = new RealGridJS.GridView("realgrid");
    gridView.setDataSource(dataProvider);

    //필드 배열 객체를 생성합니다.
    var fields = [
        {
            fieldName: "field1"
        },
        {
            fieldName: "field2"
        },
        {
            fieldName: "field3"
        },
        {
            fieldName: "field4",
            dataType: "number"
        },
        {
            fieldName: "field5",
            dataType: "number"
        },
        {
            fieldName: "field6",
            dataType: "number"
        }
    ];
    //DataProvider의 setFields함수로 필드를 입력합니다.
    dataProvider.setFields(fields);

    //필드와 연결된 컬럼 배열 객체를 생성합니다.
    var columns = [
        {
            name: "col1",
            fieldName: "field1",
            header : {
                text: "직업"
            },
            width : 60
        },
        {
            name: "col2",
            fieldName: "field2",
            header : {
                text: "성별"
            },
            width: 50
        },
        {
            name: "col3",
            fieldName: "field3",
            header : {
                text: "이름"
            },
            width: 80
        },
        {
            name: "col4",
            fieldName: "field4",
            header : {
                text: "국어"
            },
            width: 80
        },
        {
            name: "col5",
            fieldName: "field5",
            header : {
                text: "수학"
            },
            width: 80
        },
        {
            name: "col6",
            fieldName: "field6",
            header : {
                text: "영어"
            },
            width: 80
        }
    ];
    //컬럼을 GridView에 입력 합니다.
    gridView.setColumns(columns);

    var data = [
        ["배우", "여자", "전*연", "100", "70", "90"],
        ["가수", "여자", "이*희", "100", "100", "90"],
        ["회사원", "남자", "홍*동", "60", "65", "95"],
        ["가수", "남자", "신*철", "100",  "95", "90"],
        ["배우", "여자", "전*현",  "95", "100", "90"],
        ["회사원", "여자", "하*니", "80",  "85", "80"],
        ["배우", "여자", "가*현",  "95", "100", "90"]
    ];
    dataProvider.setRows(data);

    $("#btnStyles1").click(function () {
        gridView.setStyles({
            body:{
                cellDynamicStyles:[{
                    criteria:"value = 100", 
                    styles:{
                        background:"#FF00FF00"
                    }
                }, {
                    criteria:"value <= 60", 
                    styles:{
                        background:"#FFFF0000"
                    }                
                }]
            }
        }); 
    });    


    $("#btnStyles2").click(function () {
        gridView.setStyles({
            body:{
                cellDynamicStyles: function (grid, index, value) {
                    var styles = {};

                    if (value == 80) {
                        styles.background = "#FF0000FF"
                    } else if (value == 70) {
                        styles.background = "#FFFFFF00"
                    }

                    return styles;
                }
                
            }
        }); 
    });    


    $("#btnStyles3").click(function () {
        gridView.setStyles({
            body:{
                cellDynamicStyles:[{
                    criteria:"value = '배우'", 
                    styles:{
                        background:"#FFFF0000"
                    }            
                }]
            }
        }); 
    });      

    $("#btnStyles4").click(function () {
        gridView.setStyles({
            body:{
                cellDynamicStyles:[{
                    criteria:"values['field1'] = '배우'", 
                    styles:{
                        background:"#FFFF0000"
                    }            
                }]
            }
        }); 
    });      
});
   
</script>

HTML

1. 100인 데이터는 녹색, 60이하인 데이터는 빨강색 스타일  
<button type="button" class="btn btn-primary btn-xs" id="btnStyles1" > 버튼을 클릭하면 스타일이 적용됨
     
2. 80인 데이터는 파란색, 70인 데이터는 노란색 스타일      
<button type="button" class="btn btn-primary btn-xs" id="btnStyles2" > 버튼을 클릭하면 스타일이 적용됨

3. 셀의 값이 '배우'인 셀에 빨강색 스타일을 적용  
<button type="button" class="btn btn-primary btn-xs" id="btnStyles3" > 버튼을 클릭하면 스타일이 적용됨      

4. criteria를 `values['field1'] = '배우'` 로 변경  
<button type="button" class="btn btn-primary btn-xs" id="btnStyles4" > 버튼을 클릭하면 스타일이 적용됨         

<div id="realgrid" style="width: 100%; height: 300px;"></div>

참조