포맷팅

포맷팅(연락일, 고객번호, 회비)
20180421의 데이터를 YYYY-MM-DD 형태로 포맷팅 한 것이고 다른 형태로 변경 가능, 고객번호는 보여주지 않기 위해서 특정 구간을 xxxx 처리 회비는 원화임과 3자리마다 콤마를 넣어 포맷팅 rule:"₩ #,###.00"
options : {format: {type: "date", origin: "YYYYMMDD", rule: "YYYY-MM-DD"}}

동적 스타일

3번째 컬럼의 회비의 값이 1500 이상인 것을 행에 스타일을 적용
1200 이상인 경우 셀에 스타일을 동적으로 적용
qcell.setCellStyle(i, col, style);
qcell.setRowStyle(i, style, "data");

헤더 열수와 데이터 열수, 컬럼 수 얻기

헤더와 데이터 영역에 상관없이 열 수를 얻을 수 있고, header와 data 영역별로 열 수을 얻을 수 있음
또한 데이터 영역의 컬럼 수를 얻을 수 있음
nHeaderRows =qcell.getRows('header');
nDataRows = qcell.getRows('data');
nCols = qcell.getCols('data');

마지막 행 추가와 스타일 적용, 하단 틀고정

qcell.addRow(data);
qcell.setRowStyle(nSubtotalRow, {"background-color": "#81BEF7"}, "data"); 하단 틀고정은 큐셀 프로퍼티에서 frozenbottomrows : 1 이라고 넣으면 마지막 1행 틀고정

html 렌더링

해당 컬럼의 데이터를 html로 편집하여 셀에 보여주기 위해서는 큐셀 프로퍼티에서 {key: 'email', width: '12%', title: ['연락정보','이메일'], type: "html", options: {html: {data: fnEmail}}}이라고 넣어 렌더링 함수 등록하고 원하는 편집을 하는 함수를 구현하면 됨(여기서는 이메일을 클릭하면 메일 프로그램 실행될 수 있도록 링크를 생성하고 이미지를 추가, 이때 현채 추가되는 행과 열, 큐셀 객체 등의 정보도 함께 제공
function fnEmail(id, row, col, val, obj){
......
return val;
};

마지막 행 추가와 스타일 적용, 하단 틀고정

qcell.addRow(data); qcell.setRowStyle(nSubtotalRow, {"background-color": "#81BEF7"}, "data");
하단 틀고정은 큐셀 프로퍼티에서 frozenbottomrows : 1 이라고 넣으면 마지막 1행 틀고정

컬럼별 CSS 스타일 클래스 추가

컬럼별 프로퍼티를 설정할때 styleclassname을 사용하여 데이터 영역과 헤더 영역을 별도로 추가할 수 있고 해당 스타일을 정의하면 반영이 됨
{key: 'cost', width: '8%', title: ['상세정보','년간 회비'], type: "input", styleclassname: {"data": "align-right"}, sort: true, options : {format: {type: "number", rule:"₩ #,###.00"}}}

특정 인덱스의 값 또는 레이블 얻기

qcell.getCellData(3, 5);
qcell.getCellLabel(3, 5);
셀렉트박스 등 보여지는 것과 실제 할당된 데이터가 다른 경우에 필요한 것을 활용, 포맷팅한 숫자나 날짜 등의 원래 값을 얻을 경우와 보이는 값을 얻을 경우 등


버튼을 클릭하여 각 기능 확인

열(row) 행(col)