데이터 유효성 검사

SpreadJS는 데이터 무결성을 보장하기 위해 데이터 유효성 검사 규칙을 설정할 수 있습니다. 잘못된 입력을 제한하고 사용자가 명확한 옵션을 통해 올바른 데이터를 입력할 수 있도록 안내합니다. 목록 기반 데이터 유효성 검사의 경우, 미리 정의된 유효한 값 목록을 셀에 직접 표시하여 사용자가 수동으로 입력하지 않아도 됩니다. 만약 잘못된 값을 입력하면 즉시 오류 이미지가 표시되어 잘못되었음을 알립니다.

목록 데이터 유효성 검사가 적용된 셀을 편집할 때, 드롭다운 메뉴가 자동으로 나타나며 사용 가능한 유효한 옵션이 모두 표시됩니다. 입력 시, 입력한 값이 접두사와 일치하는 항목만 실시간으로 필터링되어 보여집니다(대소문자 구분 없음).

또한, 화살표 키나 마우스로 목록을 탐색할 수도 있습니다.

위 & 아래: 선택 항목 전환
Enter: 현재 선택된 항목 입력
ESC: 드롭다운 닫기

2.4cc142.gif

참고:
옵션 목록에 빈 값이 포함되어 있으면, 편집 시작 시 기본적으로 선택됩니다.
dataValidator.inCellDropdown()을 false로 설정하면 셀 편집 시 드롭다운이 표시되지 않습니다.
이 기능은 텍스트 기반 셀 유형과만 호환됩니다.

워크시트에서 입력된 정보를 다음과 같은 방식으로 유효성 검사할 수 있습니다:

다양한 유형의 데이터 유효성 검사 사용

SpreadJS는 다음과 같은 유형의 데이터 유효성 검사를 지원합니다.

날짜 유효성 검사

createDateValidator 메서드는 특정 셀에 대해 날짜 조건을 검사할 수 있습니다.

날짜 유효성 검사는 사용자가 지정된 날짜 조건을 충족하지 않는 잘못된 날짜를 입력하는 것을 제한합니다.

예를 들어, 2017년 12월 31일부터 2018년 12월 31일 사이의 날짜만 입력 가능하도록 설정할 수 있으며, 범위를 벗어난 날짜는 유효하지 않은 입력으로 처리됩니다.

spread.options.highlightInvalidData = true;
var dv = GC.Spread.Sheets.DataValidation.createDateValidator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.between, new Date(2017, 12, 31), new Date(2018, 12, 31));
dv.showInputMessage(true);
dv.inputMessage("Enter a date between 12/31/2017 and 12/31/2018.");
dv.inputTitle("Tip");
activeSheet.setDataValidator(1, 1, 1, 1, dv, GC.Spread.Sheets.SheetArea.viewport);

수식 유효성 검사

createFormulaValidator 메서드는 셀에 입력된 수식을 유효성 검사할 수 있습니다.

spread.options.highlightInvalidData = true;
// 수식 조건이 true를 반환해야 유효한 수식으로 간주됨
var dv = GC.Spread.Sheets.DataValidation.createFormulaValidator("A1>0");
dv.showInputMessage(true);
dv.inputMessage("Enter a value greater than 0 in A1.");
dv.inputTitle("Tip");
activeSheet.setDataValidator(0, 0, 1, 1, dv, GC.Spread.Sheets.SheetArea.viewport);

수식 목록 유효성 검사

createFormulaListValidator 메서드는 스프레드시트에서 수식으로 정의된 목록을 기반으로 유효성 검사를 수행합니다.

유효하지 않은 값이 적용되면 ValidationError 이벤트가 발생합니다.

activeSheet.setValue(0, 2, 5);
activeSheet.setValue(1, 2, 4);
activeSheet.setValue(2, 2, 5);

spread.options.highlightInvalidData = true;
var dv = GC.Spread.Sheets.DataValidation.createFormulaListValidator("$C$1:$C$3");
dv.showInputMessage(true);
dv.inputMessage("Pick a value from the list.");
dv.inputTitle("tip");
activeSheet.setDataValidator(1, 1, 1, 1, dv, GC.Spread.Sheets.SheetArea.viewport);
var validList = activeSheet.getDataValidator(1, 1).getValidList(sheet, 1, 1);

목록 유효성 검사

createListValidator 메서드는 미리 정의된 값을 기반으로 유효성 검사를 만듭니다.

spread.options.highlightInvalidData = true;
var dv = GC.Spread.Sheets.DataValidation.createListValidator("1,2,3");
dv.showInputMessage(true);
dv.inputMessage("Value must be 1,2 or 3");
dv.inputTitle("tip");
activeSheet.setDataValidator(1,1,1,1,dv,GC.Spread.Sheets.SheetArea.viewport);
alert(activeSheet.getDataValidator(1,1).getValidList(activeSheet,1,1));

또한, 목록의 각 항목에 대해 이스케이프 문자로 쉼표를 포함할 수 있습니다.

// Validation Lists에서 쉼표 사용
var dv1 = new GC.Spread.Sheets.DataValidation.createListValidator("123\\,456,234\\,567,789\\,564");
sheet.setText(1, 0, "Choose a number from cell B2");
dv1.inputTitle("Please choose a number:");
dv1.inputMessage("Number of money");
sheet.setDataValidator(1, 1, dv1);

var dv2 = new GC.Spread.Sheets.DataValidation.createListValidator("\\,,>,<,*,/");
sheet.setText(1, 2, "Choose an operator from cell D2");
dv2.inputTitle("Please choose an operator:");
dv2.inputMessage("operator of calculator");
sheet.setDataValidator(1, 3, dv2);

숫자 유효성 검사

createNumberValidator 메서드는 숫자 입력값을 검사합니다.

spread.options.highlightInvalidData = true;
var dv = GC.Spread.Sheets.DataValidation.createNumberValidator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.between, "5", "20", true);
dv.showInputMessage(true);
dv.inputMessage("Value must be between 5 and 20.");
dv.inputTitle("tip");
activeSheet.setDataValidator(1, 1, 1, 1, dv, GC.Spread.Sheets.SheetArea.viewport);

텍스트 길이 유효성 검사

createTextLengthValidator 메서드는 셀에 입력된 텍스트 길이를 검사합니다.

spread.options.highlightInvalidData = true;
var dv = GC.Spread.Sheets.DataValidation.createTextLengthValidator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.greaterThan, "4", "20");
dv.showInputMessage(true);
dv.inputMessage("Number of characters must be greater than 4.");
dv.inputTitle("tip");
activeSheet.setDataValidator(1, 1, 1, 1, dv, GC.Spread.Sheets.SheetArea.viewport);

데이터 유효성 검사에 다양한 하이라이트 스타일 사용하기

셀에 잘못된 정보를 표시할 때, 하이라이트 유형, 위치, 색상, 이미지 등 다양한 하이라이트 스타일을 사용할 수 있습니다. SpreadJS는 잘못된 데이터를 표시하기 위해 세 가지 하이라이트 유형(원(circle), 모서리 접기(dog-ear), 아이콘(icon))과 여섯 가지 하이라이트 위치(topLeft, topRight, bottomRight, bottomLeft, outsideLeft, outsideRight)를 지원합니다. 기본적으로 하이라이트 유형은 "circle", 하이라이트 위치는 topRight, 하이라이트 색상은 "red"입니다. 아이콘 하이라이트 스타일의 이미지의 경우, 이미지 URL 또는 base64 데이터로 지정할 수 있습니다.

다양한 하이라이트 스타일과 함께, 사용자에게 입력 도움말을 표시하거나 유효한 값 목록을 보여주는 드롭다운 버튼을 표시할 수도 있습니다.

잘못된 정보를 하이라이트하려면 highlightInvalidData 속성을 true로 설정해야 합니다. highlightStyle 메서드를 사용하면 하이라이트된 오류의 스타일을 제어할 수 있으며, 각 유형은 서로 다른 스타일 속성을 가집니다.

아래 이미지에서, 셀 B2의 하이라이트 유형은 원(circle) 스타일, 셀 D2는 모서리 접기(dog-ear) 스타일, 셀 F2는 아이콘(icon) 스타일을 나타냅니다. 또한 셀 D2의 하이라이트 위치는 topLeft, 셀 F2의 위치는 outsideLeft로 설정되어 있습니다.

아래 코드 샘플은 스프레드시트에서 데이터를 검증할 때 원(circle), 모서리 접기(dog-ear), 아이콘(icon) 세 가지 하이라이트 스타일을 적용하는 방법을 보여줍니다.

// 열 너비 설정        
sheet.setColumnWidth(1, 100.0, GC.Spread.Sheets.SheetArea.viewport);
sheet.setColumnWidth(3, 100.0, GC.Spread.Sheets.SheetArea.viewport);
sheet.setColumnWidth(5, 100.0, GC.Spread.Sheets.SheetArea.viewport);
// highlightInvalidData 옵션을 true로 설정
spread.options.highlightInvalidData = true;
// 원(circle) highlightStyle
sheet.setValue(1, 1, "Juice");
var dv1 = new GC.Spread.Sheets.DataValidation.createListValidator('Fruit,Vegetable,Food');
dv1.highlightStyle({
    type: GC.Spread.Sheets.DataValidation.HighlightType.circle,
    color: 'red'
});
sheet.setDataValidator(1, 1, dv1);
// 모서리 접기(dog-ear) highlightStyle
sheet.setValue(1, 3, "Juice");
var dv2 = new GC.Spread.Sheets.DataValidation.createListValidator('Fruit,Vegetable,Food');
dv2.highlightStyle({
    type: GC.Spread.Sheets.DataValidation.HighlightType.dogEar,
    color: 'orange',
    position: GC.Spread.Sheets.DataValidation.HighlightPostition.topLeft
});
sheet.setDataValidator(1, 3, dv2);
// 아이콘(icon) highlightStyle
var imageData =
    "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAC5ElEQVRYR8WXPUxTURTH//" +
    "8nbYE6YIKSCH70lcbEVOOgMTGokw7E2cVVcDQmCrzi0IFQICbGTcXVTRcDiXEiDBojmmifRCgtjYKDYsAQ0g + gx7xXadry0dfyQt / U5J57zu + c23vu /" +
    "xAWvx8td + r + OuvbhXKdEJ + AjYQcEkEGxB8KFwB8g8hLt7hGPPFg0oprljKKtGoHU8J + EblBsq6UvbEuIgmSz12UgG8m9HunPdsCCII1uifdDYp" +
    "G0m0lcLGNiKxAGPLPOgeJ4NpWPrYE + HK05wAdygiBC5UE3gQCvJXVzLXT3wcWi9c2AUyq930ZrL8BedyO4DkfInEF + 66ejPVF8v0WAIQ9gSYo + Eig2dbgG85E4" +
    "o6k69yJn0HjD2t + OYDPTXfditvxjuSpksEFSaG8L8hEeB5Ebam9IphoSCcuHZl7mCgA0FVtEGRXKQfmukjcHwt58m11VZu1fGyCQX + svycHMNXS27zqlBkrGdgEk" +
    "HSl1ny++aE58wh0b2AYwE1L2dtRgWygZ / 5ofwe / IujMqKklq03Glgr8b1ZKzNXASVVrz5CjlrO3rwLGDWhnWNUek7xVDQARecKwVxsjeLkaAICMUVcD0yB8VQEQm" +
    "WZYDayQqK8KAGSZujewDGB / FQG0CMDWqgAIItRVbRzkxXIARLAE4FHRntskGsr0M17ZNSwnyg625jWsqBHZBGA2omwrTi + WcxPsOAJDN5qtOPsYaU8BdlhObLfPc" +
    "fZBGfZHQ50mgKGESMT38jmuZfpYa / TBr5wi0r2BIQD3LFVhtxUQGfLHQt05QWL8MAaPJWfdOImzJSF2I8mATw2pRNsmSWYEnTocbFytTX2wLK1KkhYaCDDvTDjPbCl" +
    "KN0wNWb7O9dcE1TL972wuEgflij86MJNvuO1gotQor0C02QEh5QwmGwEn0OlweRq7QOktS67lEVc8muVnbV5RBX17PpwWl3678RxCEcpCbjwHX7gzjlGr4 / k / MV" +
    "GWHUHnf3sAAAAASUVORK5CYII = ";
sheet.setValue(1, 5, "Juice");
var dv3 = new GC.Spread.Sheets.DataValidation.createListValidator('Fruit,Vegetable,Food');
dv3.highlightStyle({
    type: GC.Spread.Sheets.DataValidation.HighlightType.icon,
    color: 'blue',
    position: GC.Spread.Sheets.DataValidation.HighlightPostition.outsideLeft,
    image: imageData
});
sheet.setDataValidator(1, 5, dv3);