들어가며

이번 강좌에서는 입력한 값을 검증하는 방법인 Column Validations에 대하여 알아보도록 하겠습니다.

이론

RealGrid는 입력된 데이터 셀의 값을 실행 시간 중 검증할 수 있는 방법을 제공하고 있습니다. 그 중 하나인 Column Validation에 대해 배워보도록 하겠습니다. Column Validation은 사용자가 값을 입력시 컬럼 셀 단위로 입력된 값을 검증합니다. 입력된 값이 검증을 통과하지 못하면 지정한 error level 에 따라 에러 아이콘이 표시되며, 이후 행 commit()전까지 검증을 통과하지 못한다면 지정한 에러 메시지가 팝업되고 commit()이 취소됩니다.

EditValidation

EditValidation은 데이터의 검증 조건과 방식을 지정할때 사용합니다.

• criteria : 검증식을 설정합니다. (ex. criteria: “value > 100”) 검증식은 해당 조건을 만족하지 못했을때 실패로 처리됩니다.
• message : 검증에 실패했을 경우 표시될 메시지를 지정합니다.
• mode : 언제 검증을 수행할 것인지를 지정합니다. ValidationMode을 설정값으로 시용합니다.
  – ‘always’ : 추가, 수정된 행이 Commit될 경우에 검증
  – ‘inserted’ : 추가된 행이 Commit될 경우에 검증
  – ‘update’ : 수정된 행이 Commit될 경우에 검증
• level : 해당 검증식이 어느 정도의 에러 등급인지 지정합니다. 여기서 지정한 값은 그리드 editOptions.commitLevel에서 지정한 레벨에 따라 검증을 수행할 것인지, 무시 할 것인지 결정됩니다. ValidationLevel을 설정 값으로 사용합니다.
  – ‘error’ : 에러 등급
  – ‘warning’ : 경고 등급
  – ‘info’ : 참고 등급
• description : 해당 검증식에 대한 설명을 입력합니다. message가 지정되지 않으면 description 메시지가 출력됩니다.

관련 그리드 속성

Column Validation과 관련된 그리드 editOption 속성이 몇가지 있습니다. 해당 속성에 대해 알아보도록 하겠습니다.

• commitLevel : 행 편집을 완료할 수 있는 최상위 ValidationLevel을 지정합니다. 예를들어 editOptions.commitLevel을 ‘warning’으로 지정하면 column validation에서 지정한 검증식 중 ‘warning’을 이하 단계의 검증식은 무시됩니다. 기본값은 ‘ignore’ 입니다.
• validateOnEdited : true면 셀 편집이 완료될 때 컬럼 Validation을 실행합니다. 기본값은 true 입니다.
• validateOnExit : true면 셀을 빠져나갈 때 컬럼 Validation을 실행합니다. 기본값은 false 입니다.

실습

실습에서는 commitLevel에 따라 Column Validation의 검증여부를 확인하고 그리드에 어떻게 표현되는지 확인해보도록 하겠습니다.

1. 컬럼에 validation을 설정합니다.

    $("#btnSetValidation").click(function () {
        //이름 컬럼에 validation을 설정합니다. (level: "error")
        var validations = [{
            criteria: "value is not empty",
            message: "이름은 반드시 필요합니다.",
            mode: "always",
            level: "error"
        }];
        var column = gridView.columnByName("col3");
        column.validations = validations;
        gridView.setColumn(column);
   
        //국어 컬럼에 validation을 설정합니다. (level: "warning")
        validations = [{
            criteria: "value = 100",
            message: "국어 점수는 100점이어야 합니다.",
            mode: "always",
            level: "warning"
        }];
        column = gridView.columnByName("col4");
        column.validations = validations;
        gridView.setColumn(column);
   
        //수학 컬럼에 validation을 설정합니다. (level: "info")
        validations = [{
            criteria: "value > 60",
            message: "수학 점수는 60점 이상이어야 합니다.",
            mode: "always",
            level: "info"
        }];
        column = gridView.columnByName("col5");
        column.validations = validations;
        gridView.setColumn(column);
   
        //영어 컬럼에 validation을 설정합니다. 검증식이 2개(level: "info", "warning")
        validations = [{
            criteria: "value >= 30",
            message: "영어 점수는 30점 이상이어야 합니다.",
            mode: "always",
            level: "warning"
        }, {
            criteria: "value <= 80",
            message: "영어 점수는 80점 이하이어야 합니다.",
            mode: "always",
            level: "info"
        }];
        column = gridView.columnByName("col6");
        column.validations = validations;
        gridView.setColumn(column);
   
        //한국사 컬럼에 validation을 설정합니다. 검증식 1개에 검증 조건 2개(level: "warning")
        validations = [{
            criteria: "(value >= 30) and (value <= 80)",
            message: "한국사 점수는 30점 이상, 80점 이하이어야 합니다.",
            mode: "always",
            level: "warning"
        }];
        column = gridView.columnByName("col7");
        column.validations = validations;
        gridView.setColumn(column);
    });

2. gridView.editOptions의 commitLevel을 info 로 설정합니다.

    $("#btnCommitLevelInfo").click(function () {
        gridView.setEditOptions({
            commitLevel: "info"
        });     
    });

실행화면

1. SetValidation 각 컬럼에 Validations을 설정합니다.

2. 1행의 전도연 이름을 지우고 ‘Enter’키를 눌러 편집을 완료해보세요. 붉은색 x 표시가 나타납니다.

3. 붉은색 x 아이콘에 마우스 포인터를 위치해 보세요. message에 입력했던 “이름은 반드시 필요합니다.” 툴팁이 표시됩니다.

4. 키보드로 아래 화살표키를 눌러 보세요(commit()). “이름은 반드시 필요합니다.” alert 창이 표시됩니다.

5. 국어부터 한국사 컬럼까지 각각의 검증식을 보고 점수를 다양하게 입력해보면서 테스트 해보세요.

6. commitLevel: “info” gridView.editOptions의 commitLevel을 info 로 설정합니다.

7. 국어부터 한국사 컬럼까지 각각의 검증식을 보고 점수를 다양하게 입력해보면서 테스트 해보세요. 5번에서와의 차이가 무엇인지 확인해보세요. (level이 info 이하인 컬럼은 검증이 무시됩니다. #수학 컬럼은 검증이 무시됩니다. 영어 컬럼은 80점 이상일때가 무시됩니다.)

전체 소스코드

SCRIPT

<link rel="stylesheet" href="/css/bootstrap.css">
<script type="text/javascript" src="/script/jquery-1.112.min.js"></script>
<script type="text/javascript" src="/script/bootstrap.min.js"></script>
<!--realgrid-->
<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 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 = [
        ["배우", "여자", "전도연", "100", "70", "90", "70", "60", "100", "80"],
        ["가수", "여자", "이선희", "100", "33", "90", "70", "60", "100", "80"],
        ["배우", "여자", "하지원", "100", "100", "90", "70", "60", "100", "80"],
        ["가수", "여자", "박정현", "100", "90", "90", "70", "60", "100", "80"],
        ["배우", "여자", "전지현", "100", "100", "90", "70", "60", "100", "80"],
        ["가수", "남자", "이승환", "100", "100", "100", "100", "100", "100", "100"],
        ["가수", "남자", "신해철", "100", "100", "100", "100", "100", "100", "100"],
        ["가수", "남자", "타블로", "100", "100", "100", "100", "100", "100", "100"],
        ["가수", "남자", "토이" , "100", "100", "100", "100", "100", "100", "100"]
    ];
    dataProvider.setRows(data);

    gridView.setOptions({
        indicator: {visible: true},        
        checkBar: {visible: false},
        stateBar: {visible: true},
        edit: {insertable: true, appendable: true, updatable: true, editable: true}
    });
    
    $("#btnSetValidation").click(function () {
        //이름 컬럼에 validation을 설정합니다. (level: "error")
        var validations = [{
            criteria: "value is not empty",
            message: "이름은 반드시 필요합니다.",
            mode: "always",
            level: "error"
        }];
        var column = gridView.columnByName("col3");
        column.validations = validations;
        gridView.setColumn(column);

        //국어 컬럼에 validation을 설정합니다. (level: "warning")
        validations = [{
            criteria: "value = 100",
            message: "국어 점수는 100점이어야 합니다.",
            mode: "always",
            level: "warning"
        }];
        column = gridView.columnByName("col4");
        column.validations = validations;
        gridView.setColumn(column);

        //수학 컬럼에 validation을 설정합니다. (level: "info")
        validations = [{
            criteria: "value > 60",
            message: "수학 점수는 60점 이상이어야 합니다.",
            mode: "always",
            level: "info"
        }];
        column = gridView.columnByName("col5");
        column.validations = validations;
        gridView.setColumn(column);

        //영어 컬럼에 validation을 설정합니다. 검증식이 2개(level: "info", "warning")
        validations = [{
            criteria: "value >= 30",
            message: "영어 점수는 30점 이상이어야 합니다.",
            mode: "always",
            level: "warning"
        }, {
            criteria: "value <= 80",
            message: "영어 점수는 80점 이하이어야 합니다.",
            mode: "always",
            level: "info"
        }];
        column = gridView.columnByName("col6");
        column.validations = validations;
        gridView.setColumn(column);

        //한국사 컬럼에 validation을 설정합니다. 검증식 1개에 검증 조건 2개(level: "warning")
        validations = [{
            criteria: "(value >= 30) and (value <= 80)",
            message: "한국 점수는 30점 이상, 80점 이하이어야 합니다.",
            mode: "always",
            level: "warning"
        }];
        column = gridView.columnByName("col7");
        column.validations = validations;
        gridView.setColumn(column);
    });

    //gridView.editOptions의 commitLevel을 info 로 설정합니다.
    $("#btnCommitLevelInfo").click(function () {
        gridView.setEditOptions({
            commitLevel: "info"
        });
    });

});     
</script>

HTML

1. <button type="button" class="btn btn-primary btn-xs" id="btnSetValidation">SetValidation</button> 각 컬럼에 Validations을 설정합니다.

2. 1행의 전도연 이름을 지우고 'Enter'키를 눌러 편집을 완료해보세요. 붉은색 x 표시가 나타납니다.

3. 붉은색 x 아이콘에 마우스 포인터를 위치해 보세요. message에 입력했던 "이름은 반드시 필요합니다." 툴팁이 표시됩니다.

4. 키보드로 아래 화살표키를 눌러 보세요(commit()). "이름은 반드시 필요합니다." alert 창이 표시됩니다.

5. 국어부터 한국사 컬럼까지 각각의 검증식을 보고 점수를 다양하게 입력해보면서 테스트 해보세요.

6. <button type="button" class="btn btn-primary btn-xs" id="btnCommitLevelInfo">commitLevel: "info"</button> gridView.editOptions의 commitLevel을 info 로 설정합니다.

7. 국어부터 한국사 컬럼까지 각각의 검증식을 보고 점수를 다양하게 입력해보면서 테스트 해보세요. 5번에서와의 차이가 무엇인지 확인해보세요. (level이 info 이하인 컬럼은 검증이 무시됩니다. #수학 컬럼은 검증이 무시됩니다. 영어 컬럼은 80점 이상일때가 무시됩니다.)

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

데모 사이트

• Column Validation 데모

API 참조

• GridBase.setColumn()
• GridBase.setEditOptions()