C15 수정된 셀에 스타일 지정하여 표시하기

들어가며

이번 강좌에서는 값이 수정되면 수정된 셀에 스타일을 적용하여 표시하는 방법에 대해 알아보도록 하겠습니다.

이론

그리드의 데이터가 수정되었을때 수정된 셀에 스타일을 적용하려면 두가지 방법으로 접근할 수 있을 것 같습니다.

첫번째로는 값이 수정될때마다 바로바로 셀에 스타일을 적용하는 법.
두번째로는 특정시점에(예를 들어 저장하기 전에 검증용으로 표시) 적용하는 법.

첫번째 방법의 경우는 onCellEdited() 이벤트 안에서 바로바로 셀 스타일을 적용하면 됩니다.
두번째 방법의 경우는 dataProvider.options.restoreMode에 “explicit”나 “auto”로 지정해야 합니다. restoeMode를 사용하면 원본 데이터와 변경된 데이터들을 확인할 수 있습니다.
원본 데이터를 확인하는 방법은 GridView.getUpdatedCells() 를 통해 가능합니다.
※ C6 데이터 복원하기 - I 지정한 행만 원래 데이터로 방법 참조

유의사항

복원모드는 그리드를 처음 설정하는 부분에서 설정해주세요. 값의 수정이 일어난 후(RowState가 변경된 후) 복원모드를 지정한 경우 RowState가 이미 변경된 행은 복원모드가 동작하지 않습니다.

실습

실습에서는 복원모드를 설정하고 첫번째와 두번째의 경우 모두 작성해보도록 하겠습니다.

버튼을 클릭하면 setOptions()을 사용하여 dataProvider에 restoreMode: “explicit”를 적용합니다.

 //복구모드: explicit 지정
 $("#btnSetRestoreMode").click(function () {
     dataProvider.setOptions({
         restoreMode: "explicit"
     });
 });

버튼을 클릭하면 셀 스타일을 추가 합니다.
//셀 스타일 추가

 $("#btnAddCellStyle").click(function () {
     gridView.addCellStyle("style01", {
         "background": "#4400ff00",
         "fontSize": 14
     });
 });

버튼을 클릭하면 onCellEdited() 이벤트를 설정합니다.

 $("#btnSetOnCellEdited").click(function () {
     gridView.onCellEdited = function (grid, itemIndex, dataRow, field) {
         grid.setCellStyle(dataRow, field, "style01", true);
     }
 });

값을 수정햐여 스타일이 잘 적용되는지 확인해보세요.

버튼을 클릭하면 onCellEdited() 이벤트를 Clear 합니다.

 $("#btnClearOnCellEdited").click(function () {
     gridView.onCellEdited = function (grid, itemIndex, dataRow, field) {
            
     }
 });

여러 값을 수정햐여 스타일이 잘 적용되는지 확인해보세요. (스타일이 적용되지 않습니다.)

버튼을 클릭하면 수정된 셀에 스타일이 적용됩니다.

 $("#btnSetUpdatedCellsStyle").click(function () {
     var uDatas = dataProvider.getUpdatedCells();

     for (var i in uDatas) {
         var dataRow = uDatas[i].__rowId;

         for (var j in uDatas[i].updatedCells) {
             var fieldName = uDatas[i].updatedCells[j].fieldName    
             gridView.setCellStyle(dataRow, fieldName, "style01", true);
         }
     }
 });

실행화면

값을 수정하여 스타일이 잘 적용되는지 확인해보세요.
여러 값을 수정햐여 스타일이 잘 적용되는지 확인해보세요. (onCellEdited()이벤트를 Clear 하였기 때문에 스타일이 적용되지 않습니다.)

전체 소스코드

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.1.24.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.1.24.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 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
        },
        {
            name: "col7",
            fieldName: "field7",
            header : {
                text: "한국사"
            },
            width: 80
        },
        {
            name: "col8",
            fieldName: "field8",
            header : {
                text: "영어"
            },
            width: 80
        },
        {
            name: "col9",
            fieldName: "field9",
            header : {
                text: "과학"
            },
            width: 80
        },
        {
            name: "col10",
            fieldName: "field10",
            header : {
                text: "사회"
            },
            width: 80
        }
    ];
    //컬럼을 GridView에 입력 합니다.
    gridView.setColumns(columns);

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

    //복구모드: explicit 지정
    $("#btnSetRestoreMode").click(function () {
        dataProvider.setOptions({
            restoreMode: "explicit"
        });
    });

    //셀 스타일 추가
    $("#btnAddCellStyle").click(function () {
        gridView.addCellStyle("style01", {
            "background": "#4400ff00",
            "fontSize": 14
        });
    });

    //onCellEdited() 이벤트를 설정
    $("#btnSetOnCellEdited").click(function () {
        gridView.onCellEdited = function (grid, itemIndex, dataRow, field) {
            grid.setCellStyle(dataRow, field, "style01", true);
        }
    });

    //onCellEdited() 이벤트를 Clear
    $("#btnClearOnCellEdited").click(function () {
        gridView.onCellEdited = function (grid, itemIndex, dataRow, field) {
            
        }
    });

    //수정된 셀에 스타일이 적용
    $("#btnSetUpdatedCellsStyle").click(function () {
        var uDatas = dataProvider.getUpdatedCells();

        for (var i in uDatas) {
            var dataRow = uDatas[i].__rowId;

            for (var j in uDatas[i].updatedCells) {
                var fieldName = uDatas[i].updatedCells[j].fieldName    
                gridView.setCellStyle(dataRow, fieldName, "style01", true);
            }
        }
    });

});   
</script>

HTML

1. <button type="button" class="btn btn-primary btn-xs" id="btnSetRestoreMode">dataProvider에 복구모드: "explicit" 지정하기</button> 

2. <button type="button" class="btn btn-primary btn-xs" id="btnAddCellStyle">셀 스타일을 추가</button> 

3. <button type="button" class="btn btn-primary btn-xs" id="btnSetOnCellEdited">onCellEdited() 이벤트 설정</button>    

4. 값을 수정하여 스타일이 잘 적용되는지 확인해보세요.

5. <button type="button" class="btn btn-primary btn-xs" id="btnClearOnCellEdited">onCellEdited() 이벤트 Clear</button> 

6. 여러 값을 수정햐여 스타일이 잘 적용되는지 확인해보세요. (onCellEdited()이벤트를 Clear 하였기 때문에 스타일이 적용되지 않습니다.)

7. <button type="button" class="btn btn-primary btn-xs" id="btnSetUpdatedCellsStyle">수정된 셀에 스타일이 적용</button> 

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

참조