RealGrid HELPB7-12 Custom Column Validation
들어가며
이번 강좌에서는 입력한 값을 검증하는 방법인 Custom Column Validations에 대하여 알아보도록 하겠습니다.
이론
RealGrid는 입력된 데이터 셀의 값을 실행 시간 중 검증할 수 있는 방법을 제공하고 있습니다. Column Validation에 대해서는 이전 강좌인 B7-11 Column Validation에서 배워 보았습니다.
간단한 검증식인 경우 Column Validation을 이용하여 처리가 가능하지만, criteria 에서 표현 불가능한 검증식이 필요할 경우도 있습니다. 이 경우 RealGrid는 셀 편집 완료 시 그리드가 발생 시키는 onValidateColumn 이벤트를 활용해서 개발자가 원하는 자유로운 검증식으로 값을 검증할 수 있도록 지원하고 있습니다. 이번 강좌에서는 onValidateColumn 을 익혀보도록 하겠습니다.
onValidateColumn()
onValidateColumn()은 Javascript를 통한 사용자 validation을 수행합니다. 해당 컬럼 값에 문제가 있다면 검증 에러와 에러 메시지를 그리드에 리턴값으로 전달 합니다.
Column Validation과의 차이점은 검증식 표현에 있어서 제한이 없고, 컬럼당 검증식을 지정하는 것이 아닌 onValidateColumn에서 모든 컬럼에 대한 처리가 가능한 것이 차이점입니다. 또 하나 onValidateColumn()에서는 editOptions.commitLevel 값이 적용되지 않습니다. 모든 에러레벨에 대한 컨트롤은 개발자께서 직접 처리하여서야 됩니다.
함수의 인자들
grid: GridBase 컨트롤.column: DataColumn 모델과 같은 구조의 컬럼 object.inserting: 행이 추가 중이면 true, 수정 중이면 false 가 전달됩니다. Column Validation 에서 배웠던mode와 비슷합니다.value: 입력된 필드의 값이 전달됩니다.
함수의 결과
‘errorLevel’, ‘errorMessage’ 속성이 포함된 객체를 리턴합니다.
errorLevel: 해당 검증 결과가 어느 정도인지 등급을 지정합니다. Column Validation 에서 배웠던level과 같습니다.
– ‘error’ : 에러 등급
– ‘warning’ : 경고 등급
– ‘info’ : 참고 등급errorMessage: 표시해줄 내용을 지정합니다. Column Validation 에서 배웠던message와 같습니다.
실습
실습에서는 onValidateColumn()을 사용하여 검증을 해보도록 하겠습니다.
-
onValidateColumn()을 설정합니다.
$("#btnSetOnValidateColumn").click(function () { gridView.onValidateColumn = function(grid, column, inserting, value) { var error = {}; if (column.fieldName === "field3") { if (value === "") { error.level = "error"; error.message = "이름은 반드시 필요합니다."; } } else if (column.fieldName === "field4") { if (value != 100) { error.level = "warning"; error.message = "국어 점수는 100점이어야 합니다."; } } else if (column.fieldName === "field5") { if (value < 60) { error.level = "info"; error.message = "수학 점수는 60점 이상이어야 합니다."; } } else if (column.fieldName === "field6") { if (value < 30) { error.level = "warning"; error.message = "영어 점수는 30점 이상이어야 합니다."; } else if (value > 80) { error.level = "info"; error.message = "영어 점수는 80점 이하이어야 합니다."; } } else if (column.fieldName === "field7") { if (!((value >= 30) && (value <= 80))) { error.level = "warning"; error.message = "한국사 점수는 30점 이상, 80점 이하이어야 합니다."; } }; return error; } }); -
gridView.editOptions의 commitLevel을 info 로 설정합니다.
$("#btnCommitLevelInfo").click(function () { gridView.setEditOptions({ commitLevel: "info" }); });
실행화면
-
그리드에 onValidateColumn() 콜백함수를 설정합니다.
-
1행의 전도연 이름을 지우고 ‘Enter’키를 눌러 편집을 완료해보세요. 붉은색 x 표시가 나타납니다.
-
붉은색 x 아이콘에 마우스 포인터를 위치해 보세요. message에 입력했던 “이름은 반드시 필요합니다.” 툴팁이 표시됩니다.
-
키보드로 아래 화살표키를 눌러 보세요(commit()). “이름은 반드시 필요합니다.” alert 창이 표시됩니다.
-
국어부터 한국사 컬럼까지 각각의 검증식을 보고 점수를 다양하게 입력해보면서 테스트 해보세요.
-
gridView.editOptions의 commitLevel을 info 로 설정합니다.
-
국어부터 한국사 컬럼까지 각각의 검증식을 보고 점수를 다양하게 입력해보면서 테스트 해보세요. (B7-11 Column Validation에서의 실행 결과와 다릅니다. #수학, 영어 컬럼이 계속 검증단계를 거칩니다. onValidateColumn()에서는 commitLevel 값이 적용되지 않습니다.)
전체 소스코드
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}
});
// onValidateColumn()을 설정합니다.
$("#btnSetOnValidateColumn").click(function () {
gridView.onValidateColumn = function(grid, column, inserting, value) {
var error = {};
if (column.fieldName === "field3") {
if (value === "") {
error.level = "error";
error.message = "이름은 반드시 필요합니다.";
}
} else if (column.fieldName === "field4") {
if (value != 100) {
error.level = "warning";
error.message = "국어 점수는 100점이어야 합니다.";
}
} else if (column.fieldName === "field5") {
if (value < 60) {
error.level = "info";
error.message = "수학 점수는 60점 이상이어야 합니다.";
}
} else if (column.fieldName === "field6") {
if (value < 30) {
error.level = "warning";
error.message = "영어 점수는 30점 이상이어야 합니다.";
} else if (value > 80) {
error.level = "info";
error.message = "영어 점수는 80점 이하이어야 합니다.";
}
} else if (column.fieldName === "field7") {
if (!((value >= 30) && (value <= 80))) {
error.level = "warning";
error.message = "한국사 점수는 30점 이상, 80점 이하이어야 합니다.";
}
};
return error;
}
});
//gridView.editOptions의 commitLevel을 info 로 설정합니다.
$("#btnCommitLevelInfo").click(function () {
gridView.setEditOptions({
commitLevel: "info"
});
});
});
</script>
HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnSetOnValidateColumn">onValidateColumn</button> 그리드에 onValidateColumn() 콜백함수를 설정합니다. 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. 국어부터 한국사 컬럼까지 각각의 검증식을 보고 점수를 다양하게 입력해보면서 테스트 해보세요. ([B7-11 Column Validation](/tutorial/b7-11/)에서의 실행 결과와 다릅니다. #수학, 영어 컬럼이 계속 검증단계를 거칩니다. onValidateColumn()에서는 commitLevel 값이 적용되지 않습니다.) <div id="realgrid" style="width: 100%; height: 250px;"></div>
데모 사이트
API 참조