SpreadJS V12 Service Pack1 으로 데이터 유효성 검사가 향상되었습니다 . SpreadJS 사용자 정의 기능을 향상시키기 위해 데이터 유효성 검증이 시각적으로 업데이트되었습니다. 이전 반복 작업에서는 데이터 유효성 검사에 대한 강조 표시 유형이 한가지 밖에 없었습니다. 이제 Dog Ear(접힌 모서리 형태)와 Icon(아이콘)이라는 두 가지 새로운 유형을 추가 할 수 있는 별도의 클래스를 만들었습니다. 이러한 아이콘 유형을 사용하면 개발자는 표시하는 데이터에 따라 특정 이미지를 표시하여 사용자 경험을 추가로 사용자 정의 할 수 있습니다.

SpreadJS v12 Service Pack 1의 새로운 기능 자세히 알아보기

또한 유효성 검사 목록 내에 이스케이프 문자를 사용하는 기능을 추가하여 쉼표가 포함된 특수 형식의 문자열이든 숫자 형식이든 사용자의 요구에 보다 적합한 옵션을 더욱 효과적으로 사용할 수 있습니다. 이 포스팅에서는 데이터 유효성 검사에 대해 설명하고 이러한 새로운 기능을 사용하는 방법에 대한 튜토리얼을 제공합니다.

강조 표시 추가

이전 버전에서는 데이터 유효성 검사 강조 표시가 원 유형으로 제한되었지만 다른 유형의 강조 표시를 추가하기 위해 분리했습니다. 이제 Circle(원), Dog ear(접힌 모서리 형태) 및 Icon(아이콘)의 세가지 유형의 데이터 유효성 검사 강조 스타일을 사용할 수 있습니다. 이 모든 유형이 작동하려면 highlightInvalidData 옵션을 true로 설정해야 합니다.

spread.options.highlightInvalidData = true;

하지만, 이러한 데이터 유효성 검사 유형은 Excel로 내보낼 수 없습니다.

데이터 유효성 검사 강조 표시 - Circle(원)

 

이 유형의 강조 표시는 DataValidation.HighlightType.circle 목록에서 찾을 수 있으며, type 및 color 속성만 포함합니다.

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(접힌 모서리 형태)

 

이 강조 스타일은 DataValidation.HighlightType.dogEar 목록에 있으며 type, color 및 position에 대한 속성을 포함하며, position 속성은 "topLeft", "topRight", "bottomRight"및 "bottomLeft"만 가능합니다.

var dv1 = new GC.Spread.Sheets.DataValidation.createListValidator('Fruit,Vegetable,Food');
dv1.highlightStyle({
    type: GC.Spread.Sheets.DataValidation.HighlightType.dogEar,
    color: 'red',
    position: GC.Spread.Sheets.DataValidation.HighlightPosition.topLeft
});
sheet.setDataValidator(1, 1, dv1);

데이터 유효성 검사 강조 표시 - Icon(아이콘)

 

마지막으로 추가된 강조 표시 스타일은 DataValidation.HighlightType.icon 목록에 있으며 type, color, position 및 image의 네 가지 속성이 있습니다.

var imageData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAC5ElEQVRYR8WXPUxTURTH//8nbYE6YIKSCH70lcbEVOOgMTGokw7E2cVVcDQmCrzi0IFQICbGTcXVTRcDiXEiDBojmmifRCgtjYKDYsAQ0g+gx7xXadry0dfyQt/U5J57zu+c23vu/xAWvx8td+r+OuvbhXKdEJ+AjYQcEkEGxB8KFwB8g8hLt7hGPPFg0oprljKKtGoHU8J+EblBsq6UvbEuIgmSz12UgG8m9HunPdsCCII1uifdDYpG0m0lcLGNiKxAGPLPOgeJ4NpWPrYE+HK05wAdygiBC5UE3gQCvJXVzLXT3wcWi9c2AUyq930ZrL8BedyO4DkfInEF+66ejPVF8v0WAIQ9gSYo+Eig2dbgG85E4o6k69yJn0HjD2t+OYDPTXfditvxjuSpksEFSaG8L8hEeB5Ebam9IphoSCcuHZl7mCgA0FVtEGRXKQfmukjcHwt58m11VZu1fGyCQX+svycHMNXS27zqlBkrGdgEkHSl1ny++aE58wh0b2AYwE1L2dtRgWygZ/5ofwe/IujMqKklq03Glgr8b1ZKzNXASVVrz5CjlrO3rwLGDWhnWNUek7xVDQARecKwVxsjeLkaAICMUVcD0yB8VQEQmWZYDayQqK8KAGSZujewDGB/FQG0CMDWqgAIItRVbRzkxXIARLAE4FHRntskGsr0M17ZNSwnyg625jWsqBHZBGA2omwrTi+WcxPsOAJDN5qtOPsYaU8BdlhObLfPcfZBGfZHQ50mgKGESMT38jmuZfpYa/TBr5wi0r2BIQD3LFVhtxUQGfLHQt05QWL8MAaPJWfdOImzJSF2I8mATw2pRNsmSWYEnTocbFytTX2wLK1KkhYaCDDvTDjPbClKN0wNWb7O9dcE1TL972wuEgflij86MJNvuO1gotQor0C02QEh5QwmGwEn0OlweRq7QOktS67lEVc8muVnbV5RBX17PpwWl3678RxCEcpCbjwHX7gzjlGr4/k/MVGWHUHnf3sAAAAASUVORK5CYII='
var dv1 = new GC.Spread.Sheets.DataValidation.createListValidator('Fruit,Vegetable,Food');
dv1.highlightStyle({
    type: GC.Spread.Sheets.DataValidation.HighlightType.icon,
    color: 'orange',
    position: GC.Spread.Sheets.DataValidation.HighlightPosition.outsideRight,
    image: imageData
});
sheet.setDataValidator(1, 1, dv1);

유효성 검사 목록의 쉼표 지원

 

이제 사용자가 선택할 수있는 유효성 검사 목록에서 쉼표를 사용할 수 있습니다. 목록 유효성 검사기를 만들 때 이스케이프 문자처럼 사용할 수 있습니다.

var dv1 = new GC.Spread.Sheets.DataValidation.createListValidator("123\\,456,234\\,567,789\\,564");

dv1.inputTitle("Please choose a number:");

dv1.inputMessage("Number of money");

sheet.setDataValidator(1,1, dv1);

데이터 유효성 검사는 사용자와 개발자 모두에게 유용한 도구이며 SpreadJS V12 Service Pack1에서는 향상된 사용자 정의 기능을 제공합니다. 이 향상된 기능에는 강조 표시 유형 추가와 유효성 검사 목록의 쉼표 지원이 포함됩니다.