Classes
QCell
Methods
(static) create(properties) → {void}
Since:
Example
QCELL.create({
"parentid" : "QCellArea",
"id" : "QCell1",
"data" : {"input": cell_data},
"rowheader" : "sequence",
"rowheaderstitle" : ["qcell1"...],
"selectmode" : "cell",
"highlightrepeat" : 2,
"frozencols" : 2,
"frozenrows" : 3,
"frozenbottomrows" : 2,
"rowheight" : {header: 40, data: 40},
"oneclickedit" : false,
"onloadurl" : "URL",
"merge" : {"data":"row"},
"delkeymode" : "none",
"disabletooltip" : true,
"useenterkeytonextcol": true
"useexcelstylepanel" : false,
"bottompanel" : true,
"bottompanelstyle" : "excel",
"copypastemode" : "focus",
"keepeditmode" : true
"additionaldataindex" : ["test1","test2"],
"events" : {click : function (event){ var objQCell = event.data.target; }},
"bottompanelcallback" : function (row, col, data) { return '재고수량 합계 :' + qcell1.getColSum(4)+'개'+' 데이터 개수 : ' + qcell1.getRows('data')+'개'},
"bottompanelheight" : 30,
"columns" : [
{title:["순번"], key:"seq", remove : true, search: true},
{title:["분류"], key:"selectmenu", type:"selectmenu", options:{input: select_method, itemcount: 9, direction:"down"}},
{title:["선택"], key:"checkbox", options: {checkedvalue: "ok", uncheckedvalue: "ng"}},
{title:["이름"], key:"name", type:"input", options: {maxlength: 4, mergecol: true, exportdatatype : "string"}},
{title:["나이"], key:"age", type:"input", options: {format: {type: "string", rule: "@ 세"}}},
{title:["입력문구"], key:"placeholder", type: "input", options: { inputclass:"align-center", placeholder:'- 없이 입력하세요'}},
{title:["연락처"], key:"phone", type:"input", options: {mask: {alias: "999-9999-9999"}}},
{title:["주민세"], key:"resident", options: { format: { type: "number", rule: "#,###" , useinvaliddata : true }}},
{title:["툴팁"], key:"tooltip", tooltip:true, options:{tooltipcallback : function customtooltip(row,col,data){return row+col+'테스트'}}},
{title:["품목가격"], key:"price1", type:"input", datytype:"number"},
{title:["가격"] key:"price2", type: "input", width: "150px", key: "price", , options: { mask: { alias: 'currency', prefix:'₩ ',
digits:2 }, format: { type: "number", rule: "₩ #,###.##" } }, styleclassname: { "data": "align-right" }, sort: true },
{title:["주소"], key:"address", type:"textarea", filter : true, topmove : true},
{title:["입사일"], key:"regdate", type:"datepicker ", options: {locale:"kr", local : "kr", changeyear :true, direction:"down"}}
],
"rowheaders" : [
"radio",
"sequence",
"checkbox",
"state"
],
"statetype" : "later",
"pagination" : {pageunit: 10, unitlist: [10, 20, 30]},
"contextmenu" : {
base: {
id: 'base-contextmenu',
contents:
[
{icon: './add.png', label: 'a', action: function(){QCell1.addRow();}},
{icon: './del.png', label: 'b', action: function(){QCell1.removeRow();}},
{label: 'c', items: [{label: 'c-1'}, {label: 'c-2'}]},
{label: 'd', items: [{label: 'd-1', items: [{label: 'd-1-1'}, {label: 'd-1-2'}]}, {label: 'd-2', items: [{label: 'd-2-1'}, {label: 'd-2-2'},]}]}
]
}
}
});
Parameters:
Name
Type
Description
properties
Object
QCELL 생성 정보
Properties
Name
Type
Attributes
Default
Description
parentid
string
QCELL을 표시할 div 컨테이너의 ID
id
string
생성할 QCELL 객체의 ID
data
Object
표시할 데이터(JSON Array 타입)
Properties
Name
Type
Attributes
Default
Description
type
string
<optional>
"object"
표시할 데이터의 타입 ("object" | "array")
input
Object
|
Array
표시할 데이터 객체
rowheader
string
<optional>
"none"
표시할 행번호 타입 ("sequence" | "reverse" | "checkbox" | "state" | "radio" ) 📘 예제 코드 보기
rowheaders
string
<optional>
"none"
표시할 행번호 타입을 입력한 순서에 따라 여러 개 생성 ("none" | "sequence" | "reverse" | "checkbox" | "state" | "radio" ) 📘 예제 코드 보기
rowheaderstitle
string
<optional>
"none"
rowheader 또는 rowheaders가 있는 header text 입력 지원 📘 예제 코드 보기
rowheaderwidth
number
<optional>
0
값 설정 시 해당 너비로 생성 📘 예제 코드 보기
statetype
string
<optional>
상태 정보 컨트롤 타입을 설정 ("immediate" | "later" ) immediate: 데이터를 서버에 즉시 반영하고 동기화하는 방식 later: 변경사항을 모아 두었다가 나중에 한 번에 동기화하는 방식 📘 예제 코드 보기
샘플1
selectmode
string
<optional>
"cells"
선택 단위 ("rows" | "row" | "cols" | "col" | "cells" | "cell") 📘 예제 코드 보기
keepeditmode
boolean
<optional>
false
그리드 밖으로 마우스 이동 시 입력창(edit)이 닫히지 않도록 설정 📘 예제 코드 보기
delkeymode
string
<optional>
키보드 delete 키 눌렀을 때 동작여부 ("select" | "focus" | "none") 📘 예제 코드 보기
copypastemode
string
<optional>
selectemode : 'row'일 때 포커스 된 셀의 데이터만 복사 & 붙여넣기 동작 => copy:true, paste:true 옵션 설정 필수 (v2.1.204 이상부터 지원) 📘 예제 코드 보기
events
function | string
<optional>
큐셀 생성 프로퍼티 옵션으로 bind 이벤트에 콜백 함수 사용("click" | "dblclick " | "mouseenter" | "mouseleave" | "mousemove" | "mouseover" | "mousedown" | "mouseup" | "keydown" | "change" | "scrollmove" | "scrolltop" | "scrollbottom" | "aftercreated " | "aftermovepage" ;| "beforesort" | "aftersort" | "valuechanged" | "selected" | "afterurlexceldown" | "datachanged" | "rowdatachanged" | "buttonclick" | "aftercreated") 📘 예제 코드 보기
highlightrepeat
number
<optional>
0
행 스타일을 반복하여 적용하는 "hightlightrepeat" 속성의 행 반복 주기 📘 예제 코드 보기
frozencols
number
<optional>
0
틀고정 열 개수 📘 예제 코드 보기
frozenrows
number
<optional>
0
틀고정 행 개수 📘 예제 코드 보기
frozenbottomrows
number
<optional>
0
하단 틀고정 행 개수 📘 예제 코드 보기
rowheight
Object
<optional>
행 높이 📘 예제 코드 보기
Properties
Name
Type
Attributes
Default
Description
header
number
<optional>
40
헤더 영역의 높이 (단위: pixel)
data
number
<optional>
40
데이터 표시 영역의 높이 (단위: pixel)
copy
booelan
<optional>
false
ctrl+c 를 이용하여 선택된 셀들에 대한 클립보드 복사 기능 사용 여부 (v2.1.2 이상부터 지원) 📘 예제 코드 보기
paste
booelan
<optional>
false
클립보드 데이터를 ctrl+v 를 이용하여 그리드에 붙여넣기 기능 사용 여부 (v2.1.2 이상부터 지원) 📘 예제 코드 보기
oneclickedit
booelan
<optional>
false
텍스트 입력이 가능한 컬럼타입 사용 시 마우스 원 클릭을 이용한 편집모드 전환 여부 📘 예제 코드 보기
useGroupUI
boolean
<optional>
false
GROUP UI 사용 여부 (v2.1.45 이상부터 지원) 📘 예제 코드 보기
disabletooltip
boolean
<optional>
false
각 컬럼에 설정한 툴팁 옵션들을 활성화/비활성화 여부 📘 예제 코드 보기
useexcelstylepanel
boolean
<optional>
false
useexcelstylepanel: false를 사용하여 기본 마우스 오버/셀 클릭 시 표시되는 패널을 비활성화합니다. 이 속성은 API인 resetCustomPanel(커스텀 하단 패널)을 사용할 때 함께 설정하는 것이 권장됩니다.(v2.1.177 이상부터 지원) 📘 예제 코드 보기
bottompanel
boolean
<optional>
false
QCELL하단에 excel처럼 선택한 셀들의 갯수, 합계, 평균을 표시하시는 패널 표시 여부 (v2.1.66 이상부터 지원) 📘 예제 코드 보기
bottompanelheight
number
<optional>
40
QCELL하단 패널 영역의 높이 (v2.1.66 이상부터 지원) 📘 예제 코드 보기
bottompanelstyle
string
<optional>
QCELL하단 패널 스타일 설정 ("excel" | "custom" | "none") (v2.1.177 이상부터 지원) 📘 예제 코드 보기
bottompanelcallback
string
<optional>
bottompanelstyle : 'custom' 사용 시 설정하는 콜백함수 (v2.1.177 이상부터 지원) 📘 예제 코드 보기
onloadurl
string
<optional>
QCELL 생성시 통신할 URL 주소 (v2.1.2 이상부터 지원)
emptymessage
string
<optional>
데이터 없을 때 표시할 text (v2.1.6 이상부터 지원)
샘플1
샘플2
📘 예제 코드 보기
useemptymessage
boolean
<optional>
emptymessage 사용 여부를 설정 text (v2.1.165 이상부터 지원) 📘 예제 코드 보기
additionaldataindex
string
<optional>
filterEx API를 사용하여 필터로 검색할 key 컬럼 📘 예제 코드 보기
pagination
Object
<optional>
pagination 설정 (v2.1.2 이상부터 지원)
Properties
Name
Type
Attributes
Default
Description
pageunit
number
<optional>
pagination 사용 시 화면에 출력할 Data의 Row수
unitlist
Array
<optional>
pagination 사용 시 화면에 출력 설정이 가능한 Data의 Row수의 배열
url
string
<optional>
pagination 사용 시 server와 통신할 url주소
loadonce
boolean
<optional>
false
pagination 사용 시 url주소가 설정되어 있을 때 server와 통신을 처음 한번만 할 것인가 선택
totalsort
boolean
<optional>
false
pagination 사용 시 sort기능과 같이 사용할 때 전체 sort 설정 여부 (v2.1.4 이상부터 지원)
param
Object
<optional>
pagination 사용 시 url주소가 설정되어 있을 때 전달하고자하는 파라미터 정보
mode
string
<optional>
"simple"
pagination 사용 방법 설정 ("simple" || "extend") (v2.1.4 이상부터 지원)
pagecount
number
<optional>
5
pagination mode 'extend' 일 때 하단에 표시할 페이지 갯수 설정 (v2.1.4 이상부터 지원)
extendmove
boolean
<optional>
false
pagination mode 'extned' 일 때 하단에 이동할 페이지 입력 화면 표시 (v2.1.5 이상부터 지원)
useProgress
boolean
<optional>
false
pagination url 일 경우 서버 통신 중 Progress 표시 여부
sendFailCallback
function | string
<optional>
pagination url 일 경우 서버 통신 중 오류 났을 때 리턴 받을 수 있는 함수
parsingErrorCallback
function | string
<optional>
pagination url 일 경우 서버 통신 중 파싱 에러 발생 시 리턴 받을 수 있는 함수
sendDoneCallback
function | string
<optional>
pagination url 일 경우 서버 통신 중 값을 보내지 않을 때 리턴 받을 수 있는 함수
sendAlwaysCallback
function | string
<optional>
pagination url 일 경우 서버 통신 중 항상 값을 보낼 때 리턴 받을 수 있는 함수
columns
Array
생성할 컬럼 정보
Properties
Name
Type
Attributes
Default
Description
title
string
컬럼의 헤더 타이틀 (멀티 타이틀 설정 가능)
key
string
|
number
컬럼에 표시할 key값 (표시할 데이터의 타입이 "array"인 경우 "number"타입으로 설정)
type
string
<optional>
"static"
컬럼 타입 ("static" | "input" | "textarea" | "datepicker" | "selectmenu" | "checkbox" | "image" | "html" | "chart" | "multicheckbox" | "number" | "slider" | "button") 📘 예제 코드 보기
width
string
<optional>
"100px"
컬럼의 넓이 ("%" 사용 가능) 📘 예제 코드 보기
datatype
string
<optional>
"string"
컬럼 데이터 타입 ("string" | "number") => type:"input"이랑 같이 사용 가능
샘플1
📘 예제 코드 보기
move
booelan
<optional>
false
컬럼 이동 기능 사용 여부
샘플1
📘 예제 코드 보기
remove
booelan
<optional>
false
컬럼 삭제 여부
📘 예제 코드 보기
sort
booelan
<optional>
false
컬럼 정렬 기능 사용 여부. col type이 "checkbox"이고, properties.columns.options.wholeselect=true 일 때 혹은 properties.pagination.totalsort = true 와 properties.pagination.url 정보가 같이 설정되어 있으면 미동작 (v2.1.4 이상부터 지원)
샘플1
📘 예제 코드 보기
resize
booelan
<optional>
false
컬럼 너비 조절 기능 사용 여부 (v2.1.167 이상부터 Ctrl+좌 또는 우 방향키로 컬럼 크기 조절 기능 지원)
샘플1
📘 예제 코드 보기
search
booelan
<optional>
false
컬럼 검색 기능 사용 여부 (v2.1.7 이상부터 지원) 📘 예제 코드 보기
tooltip
booelan
<optional>
false
컬럼 툴팁 기능 사용 여부 (v2.1.8 이상부터 지원)
샘플1
샘플2
📘 예제 코드 보기
usetooltipinellipsis
booelan
<optional>
false
데이터가 컬럼 너비보다 짧을 땐 툴팁이 안보이며, 데이터가 컬럼 너비보다 길 땐 툴팁이 보이게끔 설정 여부(v2.1.166 이상부터 지원)
filter
booelan
<optional>
false
컬럼 필터 기능 사용 여부 📘 예제 코드 보기
topmove
booelan
<optional>
false
헤더 타이틀이 묶인 컬럼의 이동 기능 사용 여부
샘플1
📘 예제 코드 보기
disabled
boolean
<optional>
false
"static", "html" 컬럼 타입 외의 모든 컬럼 타입 비활성화 여부 설정 (v2.1.8 이상부터 지원)
styleclassname
Object
<optional>
컬럼 스타일 클래스 설정 (v2.1.3 이상부터 지원)
샘플1
📘 예제 코드 보기
Properties
Name
Type
Attributes
Description
header
string
<optional>
헤더 영역 스타일 클래스 이름
data
string
<optional>
데이터 영역 스타일 클래스 이름
options
Object
<optional>
컬럼타입 의존 속성 정보
Properties
Name
Type
Attributes
Default
Description
required
boolean
<optional>
필수 입력 컬럼 여부 📘 예제 코드 보기
enterkey
Object
<optional>
Enter 키를 사용한 설정 활성화((v.2.1.181 이상부터 지원)
📘 예제 코드 보기
Properties
Name
Type
Attributes
Description
tonext
booelan
<optional>
Enter 키를 누르면 아래 행으로 이동 후 에디트 상태로
movescroll
boolean
<optional>
스크롤이 아래 행 이동에 맞춰 움직이도록 설정
delaytime
number
<optional>
Enter키를 누를 때 아래 행으로 이동하는 시간을 조정할 수 있는 enterkey의 옵션((v.2.1.181 이상부터 지원)
📘 예제 코드 보기
useenterkeytonextcol
boolean
<optional>
Enter 키를 누를 때마다 포커스가 오른쪽 열로 이동한 후 에디트 상태로 설정
📘 예제 코드 보기
exportdatatype
string
<optional>
컬럼을 문자열(텍스트 서식)로 지정하여 export 하도록 설정(엑셀 파일에 더 많은 데이터 표시 가능)
📘 예제 코드 보기
placeholder
string
<optional>
컬럼의 타입 중 input 계열(input, inputbutton, inputdatepicker, textarea)에 진입하여 placeholder 값을 설정
샘플1
📘 예제 코드 보기
inputclass
string
<optional>
입력 모드 시 스타일 정의
샘플1
📘 예제 코드 보기
mergecol
boolean
<optional>
merge type "col" 이용시 컬럼의 merge 실행 여부 (v2.1.72 이상부터 지원)
📘 예제 코드 보기
format
Object
<optional>
"static", "input", ("datepicker"와 "inputdatepicker" 컬럼 타입도 부분적으로 사용 가능) 컬럼타입 사용 시 컬럼의 데이터에 대한 포멧
Properties
Name
Type
Attributes
Description
type
string
<optional>
"static", "input" 컬럼타입 사용 시 포멧 타입 ("string" | "number" | "date" | "custom")
📘 예제 코드 보기
origin
string
<optional>
"static", "input", "datepicker", "inputdatepicker" 컬럼타입 사용 시 데이터의 원본 날짜 포맷 ("date" 포멧 타입에서만 사용, ex> "YYYY-MM-DD a hh:mm:ss" | "YYYYMMDD") * 상세한 format 설정은 https://momentjs.com/docs/#/parsing/string-format/ 를 참조하여 주시길 바랍니다. (v2.1.3 부터 변경)
샘플1
📘 예제 코드 보기
rule
string
<optional>
"static", "input", "datepicker", "inputdatepicker" 컬럼타입 사용 시 데이터를 출력할 포멧 ("custom" 포멧 타입 생략 가능, ex> "₩ #,###.##", "YYYY-MM-DD" 등)
샘플1
📘 예제 코드 보기
useinvaliddata
boolean
<optional>
포멧이 number 타입일 때 rule을 적용한 컬럼의 값을 문자열로 표현
beforeformat
function
<optional>
format이 적용되기전 컬럼의 원본 데이터 값을 조작하는 콜백함수
📘 예제 코드 보기
afterformat
function
<optional>
format이 적용된 컬럼의 데이터 값을 조작하는 콜백함수
📘 예제 코드 보기
locale
string
<optional>
"static", "input" 컬럼타입 사용 시 "type"이 "number" 나 "date"일 때 사용하려는 국가코드 입력, ex> "en" | "kr"
📘 예제 코드 보기
callback
function
<optional>
"static", "input" 컬럼타입 사용 시 "custom" 포멧 타입에서만 사용이 가능하며, 커스터마이징한 format 함수
📘 예제 코드 보기
allowemptydata
booelan
<optional>
빈 값일때도 동작할 수 있는 속성. 기본 동작의 변경이며 명시적으로 속성값을 true로 설정해야지만 동작 가능(v.2.1.158 이상 지원)
invalidchar
string
<optional>
'input' 타입의 datatype:'number' 또는 'input' 타입의 number 포맷이 설정된 컬럼에 빈 값일 때,
null 값 또는 문자열 값이 넘어올 때 설정한 값이 그리드에 표시만 됨(null은 빈 값으로 표시되게 구현)
-> 포맷이 적용되어 있는 상태기 때문에 숫자나 '111' 문자열 숫자 값은 제외
샘플1
📘 예제 코드 보기
html
Object
<optional>
"html" 컬럼타입 사용 시 컬럼의 각 영역(헤더, 데이터)별 renderer 정보
샘플1
📘 예제 코드 보기
Properties
Name
Type
Attributes
Description
header
function
<optional>
컬럼의 헤더 영역 renderer 콜백 함수
data
function
<optional>
컬럼의 데이터 영역 renderer 콜백 함수
mask
Object
<optional>
"input" 컬럼타입 사용 시 입력 형태 표시
📘 예제 코드 보기
📗 예제 코드 보기
Properties
Name
Type
Attributes
Description
alias
string
<optional>
"input" 컬럼타입 사용 시 입력 형태 (ex> "(999)-9999-9999") 그 외 currency 기능 <'currency'는 컬럼이 edit 상태일 때 해당 값들을 1,000,000처럼 세 자리마다 ,(콤마)로 끊어 보여주는 옵션>
샘플1 샘플2
prefix
string
<optional>
alias : 'currency'를 사용했을 때, prefix : '\' 입력된 값이 입력 값의 데이터 맨 앞에 \이 표시되게끔 합니다.빈 값일 때는 표시하지 않습니다.
digits
number
<optional>
alias : 'currency'를 사용했을 때, 해당 number에 입력한 값에 따라 입력 값의 데이터에 0을 붙여 표시, 만약 소숫점 자리 값이 있다면 소숫점 자리를 기준으로 값 뒤에 0을 붙여 표시
numrange
string
<optional>
"input" 컬럼타입 사용 시 입력 가능한 숫자 범위 지정 (ex> -100:100)
convert
function
<optional>
"input" 타입 컬럼의 데이터를 변환하는 콜백함수
샘플1
📘 예제 코드 보기
wordwrap
boolean
<optional>
데이터를 줄바꿈 형태로 표시(상단정렬 고정) *참고 라잇텍 홈페이지 기술사이트 개발툴킷 활용(textarea 두줄쓰기 기능 예제 참고)
📘 예제 코드 보기
maxlength
number
<optional>
"input", "textarea" , "number" 컬럼타입 사용 시 최대 입력 가능 수
📘 예제 코드 보기
maxbyte
number
<optional>
"input", "number" 컬럼타입 사용 시 최대 입력 가능 수(한글은 2byte로 계산)
📘 예제 코드 보기
limit
Object
<optional>
"input", "textarea" 컬럼타입 사용 시 입력제한 방식 설정 (2.1.8 이상부터 지원, 2.1.9부터 Object형으로 변경)
📘 예제 코드 보기
Properties
Name
Type
Attributes
Description
type
string
<optional>
입력제한 타입 설정 ("all" | "string" | "number" | "other" ) * number는 '0부터9와 ,.-' 사용가능, string은 '0부터9'를 제외한 나머지 사용가능, other는 입력가능한 문자 설정 가능
exclude
string
<optional>
입력제한 타입이 "other" 일 때 사용, 입력 제한할 문자 설정
textareawidth
string
<optional>
"textarea" 컬럼타입 사용 시 textarea의 넓이
📘 예제 코드 보기
locale
string
<optional>
"ko"
"datepicker" 컬럼타입 사용 시 출력할 달력의 언어 ("ko" | "en")
changeyear
booelan
<optional>
false
"datepicker" 컬럼타입 사용 시 달력의 년 선택 가능 여부 (v2.1.2 이상부터 지원)
📘 예제 코드 보기
changemonth
booelan
<optional>
false
"datepicker" 컬럼타입 사용 시 달력의 월 선택 가능 여부 (v2.1.2 이상부터 지원)
📘 예제 코드 보기
direction
string
<optional>
auto
"datepicker" 컬럼타입 사용 시 달력이 컬럼의 자동 또는 위와 아래로 표시되도록 지정 여부("auto" | "up" | "down")
샘플1
📘 예제 코드 보기
yearrange
string
<optional>
"c-10:c+10"
"datepicker" 컬럼타입 사용 시 달력 년도 선택 가능 기간 설정 (ex> "c-1000:c+1000" | "+100:-100" | "1900|2200") (v2.1.9 이상부터 지원)
📘 예제 코드 보기
tooltipcallback
function
<optional>
원하는 동작, 메시지 등을 지정할 수 있는 툴팁 콜백함수(개발툴킷 059번 참조)
📘 예제 코드 보기
timetype
string
<optional>
"none"
"datepicker" 컬럼타입 사용 시 timepicker의 사용 여부 ("none" | "with" | "only") (v2.1.44 이상부터 지원)
샘플1
📘 예제 코드 보기
timeformat
string
<optional>
"HHmmss"
"datepicker" 컬럼타입 사용 시 timepicker의 시간 포맷 (ex> "h:m:s") H는 24시간, h는 12시간, m은 분, s는 초이며, HH와 같이 두 글자로 설정한 경우에만 앞에 0을 표시 (v2.1.44 이상부터 지원)
샘플1
📘 예제 코드 보기
timeseparator
string
<optional>
" "
"datepicker" 컬럼타입 사용 시 date 정보와 time 정보의 구분자 (ex > "20190505 153015") (v2.1.44 이상부터 지원)
샘플1
📘 예제 코드 보기
dateimage
string
<optional>
""
"datepicker" 컬럼타입 사용 시 컬럼에 출력할 calendar의 이미지 주소 (이미지의 크기는 기본 16x16으로 출력)
dateimageside
string
<optional>
"right"
"datepicker" 컬럼타입 사용 시 calendar의 좌우위치 설정 ("left" | "right")
dateimageonly
boolean
<optional>
false
"datepicker" 컬럼타입 사용 시 click에 대한 동작을 calendar에만 할 것인지 설정 여부
input
Object
<optional>
"selectmenu", "multicheckbox" 컬럼타입 사용 시 사용할 콤보 아이템 JSON Object의 레퍼런스
샘플1
샘플2
itemcount
number
<optional>
"selectmenu" 컬럼타입 사용 시 표현할 콤보 아이템의 표시 개수
샘플1
direction
string
<optional>
"selectmenu" 컬럼타입 사용 시 목록이 위와 아래로 표시되도록 지정 여부("up" | "down")
selectedEnd
boolean
<optional>
false
"selectmenu" 컬럼타입 사용 시 아이템을 선택하면 종료의 설정 여부 (bind("selected")로 이벤트를 설정할 수 있으며, parameter는 (event, row, col, item)이다.)
샘플1
selectclickopen
boolean
<optional>
false
"selectmenu" 컬럼타입 사용 시 editmode 활성화시 selectmenu 펼쳐침 설정 여부 (v.2.1.63 이상부터 지원)
wholeselect
boolean
<optional>
false
"checkbox" 컬럼타입 사용 시 전체 선택 checkbox 생생 여부, "likeradio"가 true일 때 미동작
샘플1
📘 예제 코드 보기
showheaderlabel
boolean
<optional>
false
wholeselect 옵션이 적용된 "checkbox" 컬럼타입의 헤더 타이틀 조작 여부
checkedvalue
boolean
|
string
<optional>
true
"checkbox" 컬럼타입 사용 시 선택했을 때의 데이터의 값
샘플1
uncheckedvalue
boolean
|
string
<optional>
false
"checkbox" 컬럼타입 사용 시 선택해제했을 때의 데이터의 값
샘플1
likeradio
boolean
<optional>
false
"checkbox", "multicheckbox" 컬럼타입 사용 시 동작을 "radio"와 같이 하나만 선택 가능
샘플1
샘플2
imagealt
string
<optional>
"image" 컬럼타입 사용 시 image element 의 대체 문구
📘 예제 코드 보기
imageheight
string
<optional>
"image" 컬럼타입 사용 시 image element의 높이
📘 예제 코드 보기
imagewidth
string
<optional>
"image" 컬럼타입 사용 시 image element의 넓이
📘 예제 코드 보기
imagestyle
Object
<optional>
"image" 컬럼타입 사용 시 image element의 스타일
📘 예제 코드 보기
imageclick
string
<optional>
"image" 컬럼타입 사용 시 image element를 클릭할 때 동작할 event 콜백 함수명
📘 예제 코드 보기
imageuri
string
<optional>
"image" 컬럼타입 사용 시 출력할 image의 경로
📘 예제 코드 보기
imageerroruri
string
<optional>
"image" 컬럼타입 사용 시 에러가 발생할 경우 출력할 에러 image의 경로
📘 예제 코드 보기
min
number
<optional>
"number", "slider" 컬럼타입 사용 시 표현할 값의 최소값 설정
max
number
<optional>
"number", "slider" 컬럼타입 사용 시 표현할 값의 최대값 설정
step
number
<optional>
"number", "slider" 컬럼타입 사용 시 변경할 값의 범위
buttonwidth
string
<optional>
"button" 컬럼타입 사용 시 적용할 버튼의 넓이
샘플1
buttonheight
string
<optional>
"20px"
"button" 컬럼타입 사용 시 적용할 버튼의 높이
샘플1
buttonposition
string
<optional>
"left"
"button" 컬럼타입 사용 시 적용할 버튼의 위치
샘플1
buttonlabel
string
<optional>
""
"button" 컬럼타입 사용 시 적용할 버튼의 라벨
샘플1
buttonclick
function
<optional>
"button" 컬럼타입 사용 시 버튼 클릭 시 동작할 함수
샘플1
hiddencolumns
array
<optional>
Hidden 컬럼에 대한 정보를 저장 할 수 있는 Property(v2.1.159 이상부터 지원)
샘플1
샘플2
merge
Object
<optional>
병합 방법(JSON Array 타입)
샘플1
샘플2
📘 예제 코드 보기
Properties
Name
Type
Attributes
Default
Description
header
string
<optional>
"none"
헤더 영역의 병합 방식 ("none" | "row" | "col" | "rowandcol" | "colandrow")
data
string
<optional>
"none"
데이터 영역의 병합 방식 ("none" | "row" | "col" | "group"| "groupandrow") (v.2.17 이상부터 기존 "viewport"에서 "data"로 변경)
contextmenu
Object
<optional>
생성할 contextmenu 정보 (v2.1.7 이상부터 지원, v2.1.46에서 변경)
Properties
Name
Type
Attributes
Description
header
Object
<optional>
header영역에서 생성할 contextmenu의 정보(contextmnu의 properties)
Properties
Name
Type
Attributes
Description
id
string
<optional>
contextmenu의 ID
contents
Array
<optional>
contextmenu 구성 정보
Properties
Name
Type
Attributes
Description
icon
string
<optional>
아이콘으로 사용할 이미지의 경로(fontawesome의 i Tag 지원)
label
string
<optional>
출력할 메뉴명
callback
function | string
<optional>
메뉴 클릭시 동작할 콜백 함수
items
Array
<optional>
현재 메뉴에서 생성할 하위 메뉴 정보
divine
boolean
<optional> false
메뉴 분리 표시 여부(v2.1.8 이상부터 지원)
disabled
boolean
<optional> false
메뉴 비활성화 여부(v2.1.8 이상부터 지원)
contextmenu.data
Object
<optional>
data 영역에서 생성할 contextmenu의 정보(contextmnu의 properties)
Properties
Name
Type
Attributes
Description
except
Object
<optional>
data영역에서 예외적으로 생성할 contextmenu의 정보
Properties
Name
Type
Attributes
Description
id
string
<optional>
contextmenu의 ID
col
number
<optional>
data영역에서 예외적으로 생성할 column의 index
contents
Array
<optional>
contextmenu 구성 정보
Properties
Name
Type
Attributes
Description
icon
string
<optional>
아이콘으로 사용할 이미지의 경로(fontawesome의 i Tag 지원)
label
string
<optional>
출력할 메뉴명
callback
function | string
<optional>
메뉴 클릭시 동작할 콜백 함수
items
Array
<optional>
현재 메뉴에서 생성할 하위 메뉴 정보
divine
boolean
<optional> false
메뉴 분리 표시 여부(v2.1.8 이상부터 지원)
disabled
boolean
<optional> false
메뉴 비활성화 여부(v2.1.8 이상부터 지원)
base
Object
<optional>
data 영역에서 기본적으로 생성할 contextmenu의 정보
Properties
Name
Type
Attributes
Description
id
string
<optional>
contextmenu의 ID
contents
Array
<optional>
contextmenu 구성 정보
Properties
Name
Type
Attributes
Description
icon
string
<optional>
아이콘으로 사용할 이미지의 경로(fontawesome의 i Tag 지원)
label
string
<optional>
출력할 메뉴명
callback
function | string
<optional>
메뉴 클릭시 동작할 콜백 함수
items
Array
<optional>
현재 메뉴에서 생성할 하위 메뉴 정보
divine
boolean
<optional> false
메뉴 분리 표시 여부(v2.1.8 이상부터 지원)
disabled
boolean
<optional> false
메뉴 비활성화 여부(v2.1.8 이상부터 지원)
Returns:
Type
void
(static) hasInstance(id) → {Boolean}
입력한 ID에 해당하는 QCELL 객체의 존재 여부를 반환합니다.
Example
QCELL.hasInstance("sheet1");
Parameters:
Name
Type
Description
id
String
존재 여부를 반환 할 QCELL 객체의 id 설정
Returns:
Type
Boolean
(static) getInstance(id) → {Object}
Example
var sheet1 = QCELL.getInstance("sheet1");
Parameters:
Name
Type
Description
id
String
반환 할 QCELL 객체의 id 설정
Returns:
Type
Object
(static) getInstanceIDs() → {Array}
QCELL 객체들의 id를 배열로 반환합니다.
Example
var arrSheetIDs = QCELL.getInstanceIDs();
Returns:
Type
Array
(static) deleteInstance(id) → {Boolean}
Example
QCELL.deleteInstance("sheet1");
Parameters:
Name
Type
Description
id
String
제거 할 QCELL 객체의 id 설정
Returns:
Type
Boolean
(static) deleteAllInstances() → {Boolean}
Example
QCELL.deleteAllInstances();
Returns:
Type
Boolean