들어가며

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

이론

이전 강좌에서 설명하였듯이 컬럼 다이나믹 스타일은 스타일을 적용한 해당 컬럼에만 적용이 됩니다.
오늘 배울 바디 다이나믹 스타일의 특징은 하나의 행(item)에 스타일이 적용된다는 것이 특징 입니다. 그리고 또 다른 특징은 컬럼에 스타일을 적용하는 것이 아닌 setStyles()를 이용하여 body영역에 스타일을 지정한다는 것입니다.

여러 필드 중에 특정한 값을 기준으로 스타일을 적용할 수도 있고 행의 순번이나 행의 상태(RowState)에 따라 스타일을 적용할 수도 있습니다.

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

실습

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

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

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

  1. 홀수 행에 criteria 방식을 사용하여 스타일을 적용해보도록 하겠습니다.

     gridView.setStyles({
         body:{
             dynamicStyles:[{
                 criteria:"(row mod 2) = 1", 
                 styles:{
                     background:"#FF073763",
                     foreground:"#FFFFFFFF"
                 }
             }]
         }
     }); 
     
  2. 짝수 행에 function(){} 방식을 사용하여 스타일을 적용해보도록 하겠습니다.

     gridView.setStyles({
         body:{
             dynamicStyles: function(grid, index) {
                 if ((index.itemIndex % 2) == 0) {
                     return {
                         background:"#FFC9DAF8"
                     }
                 }
             }
         }
     }); 
     
  3. 수정된 행에 criteria 방식을 사용하여 스타일을 적용해보도록 하겠습니다. (행의 상태 값 : c:생성, u:수정, d:삭제, x:생성 후 삭제.)

     //실습상 강제로 rowState변경
     dataProvider.setRowState(0, "updated");
    
     gridView.setStyles({
         body:{
             dynamicStyles:[{
                 criteria:"state = 'u'", 
                 styles:{
                     background:"#11ffff00"
                 }
             }]
         }
     }); 
     
  4. 추가된 행에 function(){} 방식을 사용하여 스타일을 적용해보도록 하겠습니다.

     //실습상 강제로 rowState변경
     dataProvider.setRowState(3, "created");
    
     gridView.setStyles({
         body:{
             dynamicStyles: function(grid, index) {
                 var prod = grid.getDataSource();
                 var state = prod.getRowState(index.dataRow);
    
                 if (state == 'created') {
                     return {
                         background:"#11ff00ff"
                     }
                 }
             }
         }
     }); 
     
  5. 직업이 ‘가수’인 행에 criteria 방식을 사용하여 스타일을 적용해보도록 하겠습니다.

     gridView.setStyles({
         body:{
             dynamicStyles:[{
                 criteria: "values['field1'] = '가수'", 
                 styles:{
                     background:"#FFC9DAF8"
                 }
             }]
         }
     }); 
     
  6. 직업이 ‘배우’인 행에 function(){} 방식을 사용하여 스타일을 적용해보도록 하겠습니다.

     gridView.setStyles({
         body:{
             dynamicStyles: function(grid, index) {
                 var jobValue = grid.getValue(index.itemIndex, "field1");
    
                 if (jobValue == '배우') {
                     return {
                         background:"#FF073763",
                         foreground:"#FFFFFFFF"
                     }
                 }
             }
         }
     }); 
     

실행화면

  1. 홀수인 행에 스타일 적용

  2. 짝수인 행에 스타일 적용

  3. 수정된 행에 스타일 적용

  4. 추가된 행에 스타일 적용

  5. 직업이 ‘가수’인 행에 스타일 적용

  6. 직업이 ‘배우’인 행에 스타일 적용

전체 소스코드

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", "100", "90"],
        ["가수", "여자", "이선희", "100", "100", "90"],
        ["회사원", "남자", "홍길동", "60", "65", "95"],
        ["가수", "남자", "신해철", "100",  "95", "90"],
        ["배우", "여자", "전지현",  "95", "100", "90"],
        ["회사원", "여자", "하니", "80",  "85", "80"],
        ["배우", "여자", "전지현",  "95", "100", "90"]
    ];
    dataProvider.setRows(data);

    //홀수 행에 `criteria` 방식을 사용하여 스타일을 적용해보도록 하겠습니다.
    $("#btnStyles1").click(function () {
        gridView.setStyles({
            body:{
                dynamicStyles:[{
                    criteria:"(row mod 2) = 1", 
                    styles:{
                        background:"#FF073763",
                        foreground:"#FFFFFFFF"
                    }
                }]
            }
        }); 
    });    


    //짝수 행에 `function(){}` 방식을 사용하여 스타일을 적용해보도록 하겠습니다.
    $("#btnStyles2").click(function () {
        gridView.setStyles({
            body:{
                dynamicStyles: function(grid, index) {
                    if ((index.itemIndex % 2) == 0) {
                        return {
                            background:"#FFC9DAF8"
                        }
                    }
                }                
            }
        }); 
    });    


    //수정된 행에 `criteria` 방식을 사용하여 스타일을 적용해보도록 하겠습니다. 
    //(행의 상태 값 : `c`:생성, `u`:수정, `d`:삭제, `x`:생성 후 삭제.)
    $("#btnStyles3").click(function () {
        //실습상 강제로 rowState변경
        dataProvider.setRowState(0, "updated");

        gridView.setStyles({
            body:{
                dynamicStyles:[{
                    criteria:"state = 'u'", 
                    styles:{
                        background:"#11ffff00"
                    }
                }]
            }
        }); 
    });      

    //추가된 행에 `function(){}` 방식을 사용하여 스타일을 적용해보도록 하겠습니다. 
    $("#btnStyles4").click(function () {
        //실습상 강제로 rowState변경
        dataProvider.setRowState(3, "created");

        gridView.setStyles({
            body:{
                dynamicStyles: function(grid, index) {
                    var prod = grid.getDataSource();
                    var state = prod.getRowState(index.dataRow);

                    if (state == 'created') {
                        return {
                            background:"#11ff00ff"
                        }
                    }
                }                
            }
        }); 
    });      

    //직업이 '가수'인 행에 `criteria` 방식을 사용하여 스타일을 적용해보도록 하겠습니다. 
    $("#btnStyles5").click(function () {
        gridView.setStyles({
            body:{
                dynamicStyles:[{
                    criteria: "values['field1'] = '가수'", 
                    styles:{
                        background:"#FFC9DAF8"
                    }
                }]
            }
        }); 
    });   

    //직업이 '배우'인 행에 `criteria` 방식을 사용하여 스타일을 적용해보도록 하겠습니다. 
    $("#btnStyles6").click(function () {
        gridView.setStyles({
            body:{
                dynamicStyles: function(grid, index) {
                    var jobValue = grid.getValue(index.itemIndex, "field1");

                    if (jobValue == '배우') {
                        return {
                            background:"#FF073763",
                            foreground:"#FFFFFFFF"
                        }
                    }
                }
            }
        }); 
    });  
});
   
</script>
HTML
1. 홀수인 행에 스타일 적용  
<button type="button" class="btn btn-primary btn-xs" id="btnStyles1" > 버튼을 클릭하면 스타일이 적용됨
     
2. 짝수인 행에 스타일 적용      
<button type="button" class="btn btn-primary btn-xs" id="btnStyles2" > 버튼을 클릭하면 스타일이 적용됨

3. 수정된 행에 스타일 적용  
<button type="button" class="btn btn-primary btn-xs" id="btnStyles3" > 버튼을 클릭하면 스타일이 적용됨    

4. 추가된 행에 스타일 적용  
<button type="button" class="btn btn-primary btn-xs" id="btnStyles4" > 버튼을 클릭하면 스타일이 적용됨      

5. 직업이 '가수'인 행에 스타일 적용  
<button type="button" class="btn btn-primary btn-xs" id="btnStyles5" > 버튼을 클릭하면 스타일이 적용됨    

6. 직업이 '배우'인 행에 스타일 적용  
<button type="button" class="btn btn-primary btn-xs" id="btnStyles6" > 버튼을 클릭하면 스타일이 적용됨         

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

참조