자주 묻는 질문을 모았습니다.
고객여러분께서 가장 자주 문의 하시는 질문을 선별하여 게시하였습니다.
이 외에도 더 궁금하신 내용은 Q&A 게시판 또는 Contact 메뉴에 있는 연락처로 연락을 주시면 친절하게 답변을 드리도록 하겠습니다.
row나 col의 index는 data영역에서는 click이나 cursor event를 통해 값이 변경되는 것을 확인하실 수 있으나, header영역에서는 index값이 -1로 나오는 것이 정상입니다.
현재 QCELL에서는 정렬 해제 기능을 지원하지 않고 있습니다.
“html” type은 renderer기능을 사용하기 위해 구현되었습니다. 사용방법은 아래와 같습니다.
예시) 간단하게 조건이 맞으면 title부분에 색상을 넣는 방법
columns: [
{..., type: “html”, options: {html: {header: fnHeader, data: fnData}}
]
function fnHeader(id, row, col, val){
var str = val;
if(val.indexOf("I") > -1){
str = "<span style='color: orange;'>"+val+"</span>";
}
else{
str = "<span style='color: springgreen;'>"+val+"</span>";
}
return str;
};
function fnData(id, row, col, val, obj){
var str = val;
if(val.indexOf("9") > -1){
str = "<span style='color: deeppink;'>"+val+"</span>";
}
return str;
};
data영역은 header와 비해 obj 파라미터가 하나 더 추가되어 있어 다양한 방법으로 data영역을 제어할 수 있습니다. 위와 같은 방식으로 원하는 형태로의 data의 변형이 가능합니다.
QCELL의 columns 속성 중 styleclassname은 개발자나, 디자이너 혹은 퍼블리셔가 원하는 스타일을 적용하기 위해 구현되었습니다.
<style type=’text/css’>
.aligncenter {
text-align: center;
}
</style>
columns: [
{... styleclassname: [data: “aligncenter”]}
]
위와 같은 방식으로 사용하고자 하는 컬럼에 styleclassname속성 중 data영역에 aligncenter라는 class가 적용되게 됩니다.
QCELL에서 지원하고 있는 event는 아래와 같습니다.
① mousedown: 영역 안에서 Mouse 버튼을 누를 때 동작하는 Event
② mouseup: 영역 안에서 Mouse 버튼을 눌렀다가 떼었을 때 동작하는 Event
③ click: 영역 안에서 Mouse를 한 번 눌렀을 때 동작하는 Event
④ dblclick: 영역 안에서 Mouse를 두 번 눌렀을 때 동작하는 Event
⑤ mouseenter: 영역 안에 Mouse 커서가 들어왔을 때 동작하는 Event
⑥ mouseleave: 영역에서 Mouse 커서가 빠져나갔을 때 동작하는 Event
⑦ mousemove: 영역 안에서 Mouse가 움직일 때 동작하는 Event
⑧ keydown: 영역 안에서 Keyboard 입력이 발생했을 때 동작하는 Event
사용방법은 jQuery에서 사용하는 것 처럼 ‘QCELL.객체.bind(“이벤트명”, function명);’ 과 같이 사용하시면 됩니다 (예시: “click”)
사용하고자하는 이벤트가 많을 때에는 이벤트명을 나열하여 사용하시면 됩니다. (예시: click keydown” : 공백 하나와 사용하고자 하는 이벤트를 추가합니다)
QCELL은 프레임워크를 가리지 않고, JavaScript를 이용할 수 있는 프레임워크라면 어떠한 것이든 사용이 가능 합니다.
QCELL을 생성하기 위해서는 먼저 QCELL Library를 호출해야 하며, QCELL을 생성할 위치와 그 크기를 설정해야 할 필요가 있습니다.
QCELL을 생성할 때에는 지켜야할 주의점이 있습니다.
1) 생성할 위치의 영역이 div Element 여야 합니다.
2) 생성시점에서 div Element나 div Element의 부모영역들의 display가 none이 아닌 상태여야 합니다.
3) div Element에 QCELL을 출력할 크기와 넓이를 설정해야 합니다.
예시)
<script type="text/JavaScript">
$(document).ready(function () {
var QCELLProp = {
"parentid”: "sheet",
"id”: "cell",
"data”: {"input”: []},
"columns”: [
{key: '', width: '33%', title: ['col1']},
{key: '', width: '33%', title: ['col2']},
{key: '', width: '34%', title: ['col3']}]
};
QCELL.create(QCELLProp);
});
</script>
<body>
<div id="sheet" style="height: 240px; width: 100%;"></div>
</body>
위의 예시는 QCELL을 생성할 때에 필요한 필수요소들만 이용하여 구현한 것입니다.
이 중, parentid는 div Element에 선언되어 있는 id와 매칭되며, id는 생성할 QCELL 객체의 id가 됩니다. data는 QCELL 생성시 참조할 data의 위치이며, columns는 생성 시 QCELL에 출력할 columns들의 정보입니다.
QCELL은 순수하게 JavaScript로 개발된 제품으로, html이나 jsp, php 등과 같이 Javascript를 지원하는 웹 프로그래밍 언어에서 사용이 가능합니다.
QCELL을 사용하기 위해 필요한 QCELL Library의 경로지정, Library 호출의 2가지 절차만으로 사용할 수 있습니다.
예시) QCELL Library와 html파일이 같은 경로에 있을 때
<script type="text/JavaScript">
var RightTechPath = “./”; // QCELL Library 폴더위치 설정
</script>
<script type="text/JavaScript" src="./QCELL/qcell.js"></script> // QCELL Library 호출
QCELL은 jQuery나 AngularJS, React, Bootstrap과 같은 오픈소스와 충돌없이 사용이 가능합니다.
QCELL의 권장사항은 HTML5를 지원하는 IE9부터 지원하며, 그 외 타 브라우저 (Chrome, Firefox 등)를 지원합니다.
모바일 기기에서도 HTML5를 지원하는 브라우저에서는 이상없이 동작 합니다.