기본
Hello QCELL! 간단한 그리드 만들기
QCELL 그리드를 만들기 위해서는 다음이 필요합니다.
● 화면에 표시될 영역
● QCELL 그리드의 객체 ID
● 1개 이상의 컬럼
● 데이터 (빈 데이터도 포함)
QCELL을 생성하는 절차는 아래 그림과 같습니다.
먼저 라이브러리를 로드한 후 원하는 그리드를 설정하기 위해 속성 값을 사용합니다.
그리고 그리드가 만들어질 부모 컨테이너의 ID를 설정해야 합니다.
모든 설정을 마치면 그리드를 생성하고, 생성된 그리드의 인스턴스 값을 획득하여 QCELL이 제공하는 API를 사용하여 원하는 이벤트와 기능을 프로그래밍할 수 있습니다.
Step 1: 부모 컨테이너 선언
● 먼저 그리드를 배치할 위치와 크기(너비와 높이)를 결정한 다음 div 태그로 정의하고 해당 요소에 id를 할당해야 합니다.
이 id 값을 그리드 생성할 때 사용하는 부모 요소의 id로 설정해야 합니다.
높이는 px로만 설정할 수 있고, 너비는 px 또는 %로 설정할 수 있습니다.
● 이 div 태그 안에 그리드가 생성되어 부모 컨테이너로 간주됩니다.
부모 컨테이너의 크기(너비와 높이) 내에서 그리드가 표시됩니다.
컬럼을 넣을 공간이 부족하면 좌우 스크롤바가 나타나고, 만일 그리드에 바인딩된 데이터의 양이 부모 컨테이너의 크기를 벗어난다면,
자동으로 상하 스크롤바가 표시되어 모든 컬럼과 데이터를 확인할 수 있습니다.
Step 2: QCELL 속성 설정
QCELL을 생성할 때는 그리드 용도와 기능에 따라 프로퍼티 값을 설정해야 합니다.
아래와 같이 최소한의 프로퍼티 값 설정으로도 QCELL을 생성할 수 있습니다.
● 간단한 설정으로 QCELL을 생성할 수 있습니다.
ｏ 아래처럼 qcell id, qcell이 그려질 부모 컨테이너 id 그리고 그리드에 들어갈 컬럼을 1개 이상 정의하면 됩니다.
ｏ 컬럼 정의는 컬럼 헤더에 보여질 컬럼명과 컬럼의 넓이(폭), 컬럼에 보여줄 데이터 키 값만 정의하면 됩니다.
● QCELL의 종속 라이브러리로 jQuery(1.12.4)를 사용하고 있어 별도의 jQuery 라이브러리를 호출할 필요가 없습니다.
ｏ 다른 jQuery 버전을 사용해야 할 경우 QCELL 라이브러리 호출 후 사용할 jQuery 버전을 호출하면 됩니다.
이때 QCELL은 충돌을 피하기 위해 별도의 네임으로 jQuery를 정의하여 사용합니다.
● "QCELL.create()" API를 호출하여 QCELL을 생성하며, 인자로 정의한 프로퍼티를 넘겨주면 parented 영역에 속성 값으로 그려집니다.
ｏ 한 화면에 여러 개의 부모 컨테이너를 정의하고 여러 개의 그리드를 생성할 수 있으며, 이때 parentid는 모두 달라야 합니다.
ｏ 생성된 QCELL을 프로그래밍을 위해 사용하려면 각각 다른 id를 가진 QCELL 객체가 있어야 합니다.
● QCELL에 표시할 컬럼의 속성들을 "columns" 속성으로 설정하는데 다양한 설정이 가능합니다.
ｏ 그리드 전체에 대한 설정을 다양하게 할 수 있습니다. 자세한 내용은 API 문서를 참고하시기 바랍니다.
● "QCELL.getInstance()" 함수를 호출하여 QCELL 객체를 획득합니다.
ｏ QCELL을 그리고 끝나는 것이 아니라 그리드에 이벤트를 등록하거나 화면의 동작에 따라 그리드를 조작하여 사용자가 원하는 기능을 수행해야 합니다.
이때 그리드를 가르치는 인스턴스가 필요하며, 이를 사용하여 API를 호출할 수 있습니다.
이제 QCELL을 만들기 위한 HTML 화면 코딩을 완료했습니다.
저장한 후 웹 브라우저를 실행하여 해당 파일을 열면 QCELL(그리드)이 아래와 같이 생성됩니다.
QCELL에 표시할 샘플 데이터를 아래와 같이 정의하고, 데이터 속성에 선언된 값을 연결한 후 웹 브라우저에서 실행하면 아래와 같이 데이터가 표시됩니다.
