데이터가 화면에 보여질 형식을 정의합니다.
가령 Type이 "Int"이고 Format이 "#,###원"인 경우, 실제값이 15000이라면 시트에는 15,000원 으로 표시됩니다.
타입별로 정의되는 구문이 다르며, 실제 셀값은 변경되지 않습니다.(저장작업을 통해 서버로 전송시 실제 값(포맷이 적용되지 않은 값)이 전송됩니다.)
"결과: #,###원"처럼 Format을 사용하며 ':' 등 특수문자를 사용하시는 경우 특수문자 앞에 '\\'를 붙여주셔야 합니다.
1) 구분자 활용 방식
// 구분자 활용 방식 '|'이 구분자
Format: "|LetterType|Prefix|Postfix|Search|Flags|Replace"
Value | Description |
---|---|
LetterType | 대소문자를 구분할지 여부 및 기타 설정 0 : 대소문자 구분 없음 1 : 영문을 소문자로 표현 2 : 영문을 대문자로 표현 3 : 각 지역 문자의 소문자 사용 4 : 각 지역 문자의 대문자 사용 |
Prefix | 셀 값 앞에 붙일 문자열 |
Postfix | 셀 값 뒤에 붙일 문자열 |
Search | 정규 표현식으로 찾을 문자열로, Replace 구문에 있는 값으로 대체되어 보일 문자열 |
Flags | 자바스크립트 정규식의 Flag(i,g,m 사용 가능) i : 대소문자 구분 안함, g : 처음부터 끝까지 모두 변경 , m : 줄넘김 포함 검색 |
Replace | Search 구문으로 찾은 문자열을 대체할 문자열 |
열 설정
options.Cols = [
{
Name:"sTitle",
Type:"Text",
//셀의 값을 모두 대문자로 보여줍니다. 또한 앞에 '☜☜☜', 뒤에 '☞☞☞' 문자를 추가하고, 셀 값에 있는 "=" 문자열을 ":::" 로 대체합니다.
Format:"|2|☜☜☜|☞☞☞|=|ig|:::"
},
...
]
조회 데이터
{"Data":[
{... "sTitle":"붉은 악마=Red Devils", ...}
]}
시트내에 보여지는 데이터
2) 객체 방식
// 객체 방식
Format: "{'Key1':'Value1', 'Key2':'Value2', 'key3':'Value3' ... }"
[구분자 활용 방식]
Value | Description |
---|---|
Key | 셀의 실제 값(서버에서 조회되거나 저장시 서버로 전송됨) |
Value | Data에 설정된 값을 대체할 문자열(화면에 보여질 문자) |
열 설정
options.Cols = [
{
Name:"sCountry",
Type:"Text",
// 셀 값이 A인 경우 한국으로, B인 경우 일본으로, C인 경우 중국으로 대체되어 화면에 보입니다.
Format:"{'A':'<b>한국</b>','B':'일본','C':'중국'}"
}
...
]
조회 데이터
{"Data":[
{... "sCountry":"A", ...}
]}
실제 보여지는 데이터
Text타입에서 주민등록번호나, 카드번호와 같이 숫자와 구분자로 연결된 형식의 Format을 적용하고자 하실 경우에는 CustomFormat속성을 사용하세요.
예약어의 조합
메시지 파일에 따른 자동 포맷 설정 기능
Value | Description |
---|---|
m | 월, 일 데이터를 포함해서 포맷 형성("M/d") |
d | 년, 월, 일 데이터를 포함해서 포맷 형성("M/d/yyyy") |
h | 년, 월, 일, 시, 분 데이터를 포함해서 포맷 형성("M/d/yyyy H:mm") |
t | 시, 분 데이터를 포함해서 포맷 형성("H:mm") |
T | 시, 분, 초 데이터를 포함해서 포맷 형성("H:mm:ss") |
Y | 년, 월 데이터에 문자 포함해서 포맷 형성("4월 2013") |
D | 년, 월, 일 데이터에 문자 포함해서 포맷 형성("23일 4월 2013") |
l | 년, 월, 일 데이터에 문자 포함하고, 시, 분 데이터 덧붙여 포맷 형성("23일 4월 2013 9:10") |
L | 년, 월, 일 데이터에 문자 포함하고, 시, 분, 초 데이터 덧붙여 포맷 형성("23일 4월 2013 9:10:20") |
// 예약어의 조합
Format: "yyyy.MM.dd"
열 설정
options.Cols = [
{
Name:"startDate",
Type:"Date",
Format:"yyyy.MM.dd", //화면에 보이는 데이터의 형식
EditFormat:"dd-MM-yyyy" //편집시 사용자에게 보여질 데이터 형식
}
...
]
조회 데이터
{"Data":[
{... "startDate":1563980400000, ...} //2019년 7월 25일 0시 0분 0초를 의미하는 타임스템프
]}
실제 보여지는 데이터
편집시 보여지는 데이터
Date타입에서는 DataFormat, EditFormat 속성을 통해 서버에서 갖고올 데이터 형식이나 편집시 사용자에게 보여질 형식도 설정할 수 있습니다.
Date타입과 그에 따른 포맷들(Format,EditFormat,DateFormat)을 Extend 속성을 통해 한번에 정의할 수 있습니다.
예약어의 조합
%는 #또는 0과 같이 사용해야합니다. ex: "#,##0.##%"
100을 곱한 계산값이 아닌 원래값의 뒤에 "%"기호만 추가하고자 하실 때는,"#,###\\%"
로 설정하시면 됩니다.
위의 예약어와 예약어를 제외한 문자를 조합해서 사용 가능합니다. ex:"$ #,##0.00"
;(세미콜론)
으로 구분해서 값이 양수, 음수, 0일 때에 따라 화면에 보일 형식을 다르게 설정할 수 있습니다.
'_', 'e', '8', '?', '*' '@'에 해당하는 문자는 사용하시려면 반드시 문자 앞에 "\\"
을 덧붙여주셔야 합니다.
Type이 "Int"인 컬럼은 "#,##0", "Float"인 컬럼은 "#,##0.######"를 기본 포멧으로 갖습니다.
//;을 이용하여 양수,음수,0 일때의 포맷을 다르게 설정
Format: "#,###원;외상 #,###원;-"
열 설정
options.Cols = [
{
Name:"sNum",
Type:"Int",
Format:"#,###만원"
// Format:"플러스 #,###;마이너스 #,###;없음" // 100은 플러스100 -100은 마이너스100 0은 없음 으로 표시됩니다.
}
...
]
조회 데이터
{"Data":[
{... "sNum":56200, ...}
]}
실제 보여지는 데이터
// 객체 방식
Format: "{'Key1':'Value1', 'Key2':'Value2', 'key3':'Value3' ... }"
Value | Description |
---|---|
Key | 셀의 실제 값(서버에서 조회되거나 저장시 서버로 전송됨) |
Value | Data에 설정된 값을 대체할 문자열(HTML 태그) |
<style>
.alertCircle{
position:relative;left:30%;width:30px;height:25px;border-radius:50px;color:#FFFFFF;line-height:25px;font-size:12px
}
</style>
<script></script>
조회된 데이터 | 실제 보여지는 데이터 |
---|---|
![]() |
![]() |
1) 구분자 활용 방식
// 구분자 활용 방식 '|'이 구분자
Format: "|UrlPrefix|UrlPostfix|HtmlPrefix|HtmlPostfix"
Value | Description |
---|---|
UrlPrefix | 실제 링크 url의 앞에 추가될 문자열 |
UrlPostfix | 실제 링크 url의 뒤에 추가될 문자열 |
HtmlPrefix | 화면에 보일 링크 텍스트의 앞에 추가될 html 코드 |
HtmlPostfix | 화면에 보일 링크 텍스트의 뒤에 추가될 html 코드 |
options.Cols = [
{
Name:"sLink",
Type:"Link",
//1. anchor 태그의 앞에 URL
//2. anchor 태그의 뒤 URL
//3. anchor 태그 앞에 붙여질 text or html
//4. anchor 태그 뒤에 붙여질 text or html
Format:"|/EMS/gm1/board.do?contents=|&group=USER4"
+"|<img src='./assets/imgs/hot.svg' style='width:20px;height:20px;'>"
+"|<img src='./assets/imgs/new.jpg' style='width:20px;height:20px;'>"
}
...
]
조회된 데이터 (Link 타입에 대한 데이터 구조 참고)
{"Data":[
{... "LinkData":"|487141|Best way to save and edit text data without a database|_self " ...}
]}
실제 보여지는 데이터 | link 된 내용 |
---|---|
![]() |
![]() |
2) 객체 방식
// 객체 방식
Format: "{'UrlPrefix':'Value1', 'UrlPostfix':'Value2', 'HtmlPrefix':'Value3', 'HtmlPostfix':'Value4'}"
Value | Description |
---|---|
UrlPrefix | 실제 링크 url의 앞에 추가될 문자열 |
UrlPostfix | 실제 링크 url의 뒤에 추가될 문자열 |
HtmlPrefix | 화면에 보일 링크 텍스트의 앞에 추가될 html 코드 |
HtmlPostfix | 화면에 보일 링크 텍스트의 뒤에 추가될 html 코드 |
options.Cols = [
{
Name: "sLink",
Type: "Link",
Format: {
UrlPrefix:"/EMS/gm1/board.do?contents=",
UrlPostfix:"&group=USER4",
HtmlPrefix:"<img src='./assets/imgs/hot.svg' style='width:20px;height:20px;'>",
HtmlPostfix:"<img src='./assets/imgs/new.jpg' style='width:20px;height:20px;'>"
},
}
...
]
조회된 데이터 (Link 타입에 대한 데이터 구조 참고)
{"Data":[
{... "LinkData":"|487141|Best way to save and edit text data without a database|_self " ...}
]}
실제 보여지는 데이터 | link 된 내용 |
---|---|
![]() |
![]() |
1) 구분자 활용 방식
// 구분자 활용 방식 '|'이 구분자
Format: "|UrlPrefix|UrlPostfix|HtmlPrefix|HtmlPostfix|LinkPrefix|LinkPostfix"
Value | Description |
---|---|
UrlPrefix | 이미지의 src 속성 앞에 추가될 문자열 |
UrlPostfix | 이미지의 src 속성 뒤에 추가될 문자열 |
HtmlPrefix | 이미지 태그 앞에 추가될 html 코드 |
HtmlPostfix | 이미지 태그 뒤에 추가될 html 코드 |
LinkPrefix | 이미지 클릭시 이동할 링크 앞에 추가될 경로 URL |
LinkPostfix | 이미지 클릭시 이동할 링크 뒤에 추가될 경로 URL |
options.Cols = [
{
Name: "sImg",
Type: "Img",
//1. img 태그의 src 값의 앞에 추가될 경로
//2. img 태그의 src 값의 뒤에 추가될 경로
//3. img 태그 앞에 넣고 싶은 text나 html
//4. img 태그 뒤에 넣고 싶은 text나 html
//5. 이미지를 클릭시 연결될 URL의 앞에 추가될 경로
//6. 이미지를 클릭시 연결될 URL의 뒤에 추가될 경로
Format: "|http://ibsheet.com/demo/images/icons/|.jpg|<button cls='imgMBtn'>|</button>|/EMS/gm1/board.do?contents=|&group=USER4"
}
...
]
2) 객체 방식
// 객체 방식
Format: "{'UrlPrefix':'Value1', 'UrlPostfix':'Value2', 'HtmlPrefix':'Value3', 'HtmlPostfix':'Value4', 'LinkPrefix':'Value5', 'LinkPostfix':'Value6'}"
Value | Description |
---|---|
UrlPrefix | 이미지의 src 속성 앞에 추가될 문자열 |
UrlPostfix | 이미지의 src 속성 뒤에 추가될 문자열 |
HtmlPrefix | 이미지 태그 앞에 추가될 html 코드 |
HtmlPostfix | 이미지 태그 뒤에 추가될 html 코드 |
LinkPrefix | 이미지 클릭시 이동할 링크 앞에 추가될 경로 URL |
LinkPostfix | 이미지 클릭시 이동할 링크 뒤에 추가될 경로 URL |
options.Cols = [
{
Name: "sImg",
Type: "Img",
Format: {
UrlPrefix: "http://ibsheet.com/demo/images/icons/",
UrlPostfix: ".jpg",
HtmlPrefix: "<button cls='imgMBtn'>",
HtmlPostfix: "</button>",
LinkPrefix: "/EMS/gm1/board.do?contents=",
LinkPostfix: "&group=USER4"
}
}
...
]
product | version | desc |
---|---|---|
core | 8.0.0.0 | 기능 추가 |