들어가며

이번 강좌는 기준 컬럼 값에 따라 특정 컬럼들을 편집하거나 편집 불가능하게 하는 것을 배워보도록 하겠습니다.

이론

RealGrid에서는 값에 따라 조건을 주어 스타일을 동적으로 표현할 수 있는 DynamicStyles 기능을 지원하고 있습니다.
그러나 이 DynamicStyles기능은 셀의 스타일만 조작할 수 있고 editable 이나 readOnly 속성을 조작할 수는 없습니다.

이 문제는 onCurrentRowChanged() 콜백함수에서 처리할 수 있습니다. 처리 방법의 개념은 선택된 행이 바뀔때 마다 기준 컬럼(조건)의 값을 바라보고 컬럼들의 editable을 조작하는 것 입니다. 또한 기준 컬럼의 값이 변경 되었을때에는 onCellEdited()에서 editable을 조작하는 하면 됩니다.

처리 방법 요약
  1. dynamicStyles을 사용하여 수정 가능 여부에 따라 색상을 표시합니다.
  2. onCurrentRowChanged()에서 조건에 따라 나머지 컬럼들의 editable 속성 값을 설정한다.
  3. 조건(기준컬럼) 값이 사용자의 수정으로 변경된다면 onCellEdited()에서도 컬럼들의 editable 속성값을 설정합니다.

실습

실습에서는 직업이 가수인 경우 국어, 영어, 수학이 수정가능하고 배우인 경우 국사, 윤리, 과학만 수정가능하게 처리하겠습니다.

  1. 가수인 경우 국어, 영어, 수학 과목에 적용할 동적 스타일을 생성하여 컬럼에 적용합니다.

     var columnStyles_singer = [{
         criteria: "values['field1'] = '가수'",
         styles: "background=#5500ff00"
     }, {
         criteria: "values['field1'] = '배우'",
         styles: "background=#55ff0000"
     }];
     ...
    
     var columns = [
     ...
         {
         name: "column4",
         fieldName: "field4",
         header : {
             text: "국어"
         },
         dynamicStyles: columnStyles_singer,
         width: 80
     },
     ...
     ]
     
  2. 배우인 경우 국사, 윤리, 과학 과목에 적용할 동적 스타일을 생성하여 컬럼에 적용합니다.

     var columnStyles_actor = [{
         criteria: "values['field1'] = '가수'",
         styles: "background=#5500ff00"
     }, {
         criteria: "values['field1'] = '배우'",
         styles: "background=#55ff0000"
     }];
     ...
    
     var columns = [
     ...
         {
         name: "column7",
         fieldName: "field7",
         header : {
             text: "국사"
         },
         dynamicStyles: columnStyles_actor,
         width: 80
     },
     ...
     ]        
     
  3. 화면에는 이미 색상이 적용되어 표시되고 있습니다.

  4. 각 과목들의 값을 수정해 봅니다. 현재까지는 잘 수정되고 있습니다.

  5. 버튼을 클릭하면 가수는 국어, 영어, 수학만, 배우는 국사, 윤리, 과학만 수정 가능합니다.

     $("#btnOnCurrentRowChanged").click(function () {
         //editable 설정
         gridView.onCurrentRowChanged =  function (grid, oldRow, newRow) {
             if (newRow > -1) {
                 var editable = dataProvider.getValue(newRow, "field1") == "가수"
                 grid.setColumnProperty("column4","editable", editable);
                 grid.setColumnProperty("column5","editable", editable);
                 grid.setColumnProperty("column6","editable", editable);
                 grid.setColumnProperty("column7","editable", !editable);
                 grid.setColumnProperty("column8","editable", !editable);
                 grid.setColumnProperty("column9","editable", !editable);
             }
         };
     });     
     
  6. 4행의 가수 박정혀4의 직업을 배우로 수정한 후 국사, 윤리, 과학 과목을 수정해 봅니다. 결과는 수정이 되지 않습니다. 하지만 다른 행을 선택했다가 다시 돌아와서 수정하면 수정이 됩니다.

  7. 6번에서 문제가 된 점을 onCellEdited() 이벤트를 통해서 수정해보도록 하겠습니다.

     $("#btnOnCellEdited").click(function () {
         //editable 설정
         gridView.onCellEdited = function (grid, itemIndex, dataRow, field) {
         if (dataRow > -1) {
                 if (field == dataProvider.getFieldIndex("field1")) { 
                     var editable = grid.getValue(itemIndex, "field1") == "가수"
                     grid.setColumnProperty("column4","editable", editable);
                     grid.setColumnProperty("column5","editable", editable);
                     grid.setColumnProperty("column6","editable", editable);
                     grid.setColumnProperty("column7","editable", !editable);
                     grid.setColumnProperty("column8","editable", !editable);
                     grid.setColumnProperty("column9","editable", !editable);
                 }
             }
         };
     });     
     

실행화면

  1. 화면에는 미리 설정한 동적스타일에 따라 색상이 표시되고 있습니다.

  2. 1행의 각 과목들의 값을 수정해 봅니다. 현재까지는 잘 수정되고 있습니다.

  3. 버튼을 클릭하고 2행을 선택해 봅니다. 가수라면 국어, 영어, 수학만, 배우라면 국사, 윤리, 과학만 수정 가능합니다.

  4. 4행의 가수 박정현의 직업을 배우로 수정한 후 국사, 윤리, 과학 과목을 수정해 봅니다. 결과는 수정이 되지 않습니다. 하지만 다른 행을 선택했다가 다시 돌아와서 수정하면 수정이 됩니다. 이유는 우리가 각 컬럼의 editable 속성을 바꾸는 코드를 dataRow가 바뀌었을때만 수행하도록 작성했기 때문입니다. 아래 5번 OnCellEdited() 이벤트를 통해 값이 수정되었을때 바로 설정하도록 코드를 작성하도록 하겠습니다.

  5. 버튼을 클릭하면 OnCellEdited()가 설정되고 바로 수정 가능/불가능 상태가 설정됩니다.

  6. 마지막행 전지현의 직업을 가수로 수정하고 각 과목의 점수를 수정하여 바로 반영이 되었는지 확인해보세요.

전체 소스코드

SCRIPT
<link rel="stylesheet" href="/css/bootstrap.css">
<script type="text/javascript" src="/script/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/script/bootstrap.min.js"></script>
<!--realgrid-->
<script type="text/javascript" src="/script/realgridjs-lic.js"></script>
<script type="text/javascript" src="/script/realgridjs_eval.1.0.14.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.0.14.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"
        },
        {
            fieldName: "field5"
        },
        {
            fieldName: "field6"
        },
        {
            fieldName: "field7"
        },
        {
            fieldName: "field8"
        },
        {
            fieldName: "field9"
        },
        {
            fieldName: "field10"
        }
    ];
    //DataProvider의 setFields함수로 필드를 입력합니다.
    dataProvider.setFields(fields);

    var columnStyles_actor = [{
        criteria: "values['field1'] = '배우'",
        styles: "background=#2200ff00"
    }, {
        criteria: "values['field1'] = '가수'",
        styles: "background=#22ff0000"
    }];

    var columnStyles_singer = [{
        criteria: "values['field1'] = '가수'",
        styles: "background=#2200ff00"
    }, {
        criteria: "values['field1'] = '배우'",
        styles: "background=#22ff0000"
    }];

    //필드와 연결된 컬럼 배열 객체를 생성합니다.
    var columns = [
        {
            name: "column1",
            fieldName: "field1",
            values: ['가수', '배우'],
            editor: {
                type: "dropDown",
                textReadOnly: true
            },
            header : {
                text: "직업"
            },
            width : 60
        },
        {
            name: "column2",
            fieldName: "field2",
            editable: false,
            header : {
                text: "성별"
            },
            width: 50
        },
        {
            name: "column3",
            fieldName: "field3",
            editable: false,
            header : {
                text: "이름"
            },
            width: 80
        },
        {
            name: "column4",
            fieldName: "field4",
            header : {
                text: "국어"
            },
            dynamicStyles: columnStyles_singer,
            width: 45
        },
        {
            name: "column5",
            fieldName: "field5",
            header : {
                text: "영어"
            },
            dynamicStyles: columnStyles_singer,
            width: 45
        },
        {
            name: "column6",
            fieldName: "field6",
            header : {
                text: "수학"
            },
            dynamicStyles: columnStyles_singer,
            width: 45
        },
        {
            name: "column7",
            fieldName: "field7",
            header : {
                text: "국사"
            },
            dynamicStyles: columnStyles_actor,
            width: 45
        },
        {
            name: "column8",
            fieldName: "field8",
            header : {
                text: "윤리"
            },
            dynamicStyles: columnStyles_actor,
            width: 45
        },
        {
            name: "column9",
            fieldName: "field9",
            header : {
                text: "과학"
            },
            dynamicStyles: columnStyles_actor,
            width: 45
        }
    ];
    //컬럼을 GridView에 입력 합니다.
    gridView.setColumns(columns);

    var data = [
        ["배우", "여자", "전도연", "20", "22", "90", "70", "60", "100"],
        ["가수", "여자", "이선희", "40", "33", "90", "70", "60", "100"],
        ["배우", "여자", "하지원", "10", "11", "90", "70", "60", "100"],
        ["가수", "여자", "박정현", "40", "22", "90", "70", "60", "100"],
        ["배우", "여자", "전지현", "20", "44", "90", "70", "60", "100"]
    ];
    dataProvider.setRows(data);

    //onCurrentRowChanged()
    $("#btnOnCurrentRowChanged").click(function () {
        //editable 설정
        gridView.onCurrentRowChanged =  function (grid, oldRow, newRow) {
            if (newRow > -1) {
                console.log("onCurrentRowChanged");
                var editable = dataProvider.getValue(newRow, "field1") == "가수"
                grid.setColumnProperty("column4","editable", editable);
                grid.setColumnProperty("column5","editable", editable);
                grid.setColumnProperty("column6","editable", editable);
                grid.setColumnProperty("column7","editable", !editable);
                grid.setColumnProperty("column8","editable", !editable);
                grid.setColumnProperty("column9","editable", !editable);
            }
        };
    });

    $("#btnOnCellEdited").click(function () {
        gridView.onCellEdited = function (grid, itemIndex, dataRow, field) {
            if (dataRow > -1) {
                if (field == dataProvider.getFieldIndex("field1")) { 
                    var editable = grid.getValue(itemIndex, "field1") == "가수"
                    grid.setColumnProperty("column4","editable", editable);
                    grid.setColumnProperty("column5","editable", editable);
                    grid.setColumnProperty("column6","editable", editable);
                    grid.setColumnProperty("column7","editable", !editable);
                    grid.setColumnProperty("column8","editable", !editable);
                    grid.setColumnProperty("column9","editable", !editable);
                }
            }
        };
    }); 

});    
</script>
HTML
1. 화면에는 미리 설정한 동적스타일에 따라 색상이 표시되고 있습니다.

2. 1행의 각 과목들의 값을 수정해 봅니다. 현재까지는 잘 수정되고 있습니다.

3. <button type="button" class="btn btn-primary btn-xs" id="btnOnCurrentRowChanged">onCurrentRowChagned 설정하기</button> 버튼을 클릭하고 2행을 선택해 봅니다. 가수라면 국어, 영어, 수학만, 배우라면 국사, 윤리, 과학만 수정 가능합니다.

4. 4행의 가수 박정현의 직업을 배우로 수정한 후 국사, 윤리, 과학 과목을 수정해 봅니다. 결과는 수정이 되지 않습니다. 하지만 다른 행을 선택했다가 다시 돌아와서 수정하면 수정이 됩니다. 이유는 우리가 각 컬럼의 ediatble 속성을 바꾸는 코드를 dataRow가 바뀌었을때만 수행하도록 작성했기 때문입니다. 아래에서 5번 OnCellEdited() 이벤트를 통해 값이 수정되었을때 바로 설정하도록 코드를 작성하도록 하겠습니다.  

5. <button type="button" class="btn btn-primary btn-xs" id="btnOnCellEdited">onCellEdited 설정하기</button> 버튼을 클릭하면 OnCellEdited()가 설정되고 바로 수정 가능/불가능 상태가 설정됩니다.

6. 마지막행 전지현의 직업을 가수로 수정하고 각 과목의 점수를 수정하여 바로 반영이 되었는지 확인해보세요.  

관련 데모 페이지


API 참조