그리드 데이터 CRUD(추가, 가져오기, 수정, 삭제)
사용여부는 셀렉트박스로 컬럼을 구성했으며 값과 레이블이 같습니다.
몇번째 행에 새로 생성할지를 결정후 해당 행을 선택 후 "추가" 버튼을 누르면 새로운 행이 생성(qcell.insertRow(nRow);)입니다.
지우고 싶은 행을 선택 후 "삭제" 버튼을 구르면 해당 행이 삭제(qcell.deleteRow(nRow);)됩니다.
수정하고 싶은 행과 셀을 선택하여 데이터를 바꾸면 수정이 됩니다.
위의 3가지 기능을 수행할때마다 해당 정보를 큐셀은 가지고 있으며 이러한 데이터를 qcell.getStates();를 통해 얻어내어 원하는 기능을 수행할 수 있습니다.
{
"d":[{"row":-1,"data":{"id":"SAMPLE-00003","name":"Runtime Environment","description":"Presentation Layer","useYn":"Y","regUser":"eGov"}}],
"i":[{"row":2,"data":{"name":"dafdadf"}}],
"u":[{"row":1,"data":{"id":"SAMPLE-00001","name":"adfafadfas","description":"Foundation Layer","useYn":"Y","regUser":"eGov"}}]
}
상태별(i, u, d) 로 변경 데이터를 얻는 것은 qcell.getState("i"), qcell.getState("u"), qcell.getStae("d") 이렇게 하시면 됩니다.
객체가 return 되며, qcell.getState("i").length 추가된 row의 수를 얻을 수 있습니다. 데이터는 qcell.getState("i").row 몇 번째 row 인지와 qcell.getState("i").data 데이터를 얻을 수 있습니다.
event 객체를 활용하거나 qcell의 함수를 이용하여 원하는 로직을 작성할 수 있습니다. 현재 더블클릭에 현재 포커스 된 행과 열을 얻어내는 코드가 들어가 있습니다.
qcell.attr('focuscell');

상태를 강제로 조정하기 위해서는 큐셀을 만들때 속성으로 statetype : 'later' 넣어 주어야 합니다.
qcell.setRowState(nRow, strStatus); // nRow - 행번호
strStauts - 'i','u','d'
- 특정행 상태 정보 삭제
qcell.removeRowState(nRow); // nRow - 행번호
- 모든 상태정보 초기화
qcell.clearRowStates();

상태가 조정된 데이터를 헤더 정보를 포함하여 얻는 api를 사용하면 됩니다.
qcell1.getStatesBySep('▩','▦');
qcell1.getStatesBySep(rowSep, colSep)
parameter rowSep (string) 로우 구분자 없으면 '|'
parameter colSep (string) 컬럼 구분자 없으면 '^'

그리드에 바인딩 된 모든 데이터를 상태 정보르 포함해 얻어내는 기능입니다. 이 데이터를 서버에 전달할때 사용할 수 있습니다.
QCELL.getAllStatesBySep(strStateName, strRowName, rowSep, colSep)
Parameter
- strStateName : 상태정보 표시 명. 없으면 기본값 'm'
- strRowName : Row 정보 표시 명. 없으면 기본값 'rownum'
- rowSep (string) 로우 구분자 없으면 '|'
- colSep (string) 컬럼 구분자 없으면 '^'
- 예시
qcell1.getAllStatesBySep();
m^rownum^checkbox^input^textarea^selectmenu^datepicker^image^masknumber^foramtstring^formatnumber^foramtdate^formatcustom^rowindex|^1^false^Crane Irwin^Exercitation aliquip est velit aute veniam proident nisi. Aliquip minim nostrud id ipsum aliqua nulla sunt id ullamco cillum ut ex excepteur. Fugiat veniam aliqua officia id occaecat. Qui ut elit in magna excepteur ipsum nisi nostrud ea nisi excepteur ex. Eiusmod tempor velit laborum excepteur dolor. Minim dolore veniam sunt ex proident amet.^4^20031119^https://placeimg.com/32/32/nature^9435483334^QUARMONY^3549488.13^20151006^7303947649348^0|^2^true^Adrian Reilly^Nisi qui minim deserunt ex aute nostrud nostrud. Ullamco adipisicing proident do laborum occaecat consectetur ut esse non. Ex consequat anim ea qui. Commodo duis nostrud sit consequat deserunt do exercitation adipisicing irure minim pariatur. Dolor quis ea commodo exercitation exercitation ipsum velit sint enim nisi consequat et exercitation nisi. Dolor incididunt commodo magna enim ut sit est.^2^20130720^https://placeimg.com/32/32/peopel^8954222818^ORONOKO^66754512.99^20170417^1875148804137^1|u^3^true^Rocha Alvarez^Ea ipsum occaecat nisi aute ad dolor ea ex est laboris proident et duis est. Veniam pariatur commodo ut non magna ipsum mollit laboris. Duis dolor ex voluptate eu Lorem commodo Lorem commodo eu. Cupidatat dolor aliqua culpa proident id in sint aliquip do excepteur ullamco amet. Reprehenderit adipisicing nulla labore aute incididunt nisi adipisicing qui dolor fugiat anim. Esse fugiat Lorem id eiusmod occaecat duis excepteur occaecat culpa cupidatat minim.^0^20011214^https://placeimg.com/32/32/tech^9834343920^ZANILLA^54589986.83^20170920^2219485831380^2|u^4^false^Rice George Reilly Melendez^Et in nulla amet deserunt. In enim cillum officia proident. Fugiat culpa enim incididunt commodo aliquip cillum duis cupidatat aute officia sint Lorem labore deserunt. Culpa mollit sint qui laboris commodo ea aliqua eu.^1^20130424^https://placeimg.com/32/32/tech^8164193071^GRACKER^60942385.49^20150622^9097476549049^3

업데이트(valuechanged)시 해당 로우에 바인딩 되었던 원래 값과 비교하여 상태값을 표시하고 얻어냅니다.

데이터와 설정을 기반으로 생성되는 그리드(큐셀)에서 이벤트를 처리하기 위해서는 이벤트를 바인딩하고 필요가 없어질 경우 언바인딩을 하면 됩니다.
이 예제에는 click, double click, valuechanged가 바인딩 되어 있습니다.
qcell.bind('click', qcellClick);
qcell.bind('dblclick', qcellDbClick);
qcell.bind('keydown', qcellKeydown);
qcell.bind('valuechanged', qcellChange);

데이터의 길이가 가변적이고 한 컬럼의 너비에 보여지지 않는 경우에 직관적으로 보기를 원하는 경우 툴팁(마우스를 가져다 놓으면) 팝업 메시지처럼 보여지는 기능
적욯하고 싶은 컬럼의 속성에 추가 {key:"description", title:['설명'], tooltip: true, type: 'textarea', resize: true, width:'18%', styleclassname: {"data": "align-left"}}

생성시 rowheaders: ["sequence", "reverse", "checkbox", "state"], - 행추가, 데이터변경, 행삭제 시 해당 rowheader 영역에 신호등 표현
- rt-qc-rowheader-state-init
- rt-qc-rowheader-state-insert
- rt-qc-rowheader-state-update
- rt-qc-rowheader-state-delete

callback 정의

 - rowheaderoptions 속성에 사용 callback 정의

ex) rowheaderoptions : [{ col : 3 , data : fnData, header : fnHeader}],

   col : 적용될 column 번호

   data : data 부분에 정의 될 callback 함수

   header : header 부분에 정의 될 callback 함수

 

function fnData(id,row,col){

   return "<span>" + row+"</span>"

}

function fnHeader(id,row,col){

   return "<span>custom</span>"

}

큐셀에서 focus된 행의 데이터 및 상태값('i', 'u', 'd')와 기본 상태값 ''을 가져올 수 있습니다.
qcell.getFocusRowData();
qcell.getFocusRowState();

전역으로 선언하는 방법
그리드 생성(QCELL.create 함수) 전에 아래 부분을 선언하면 이후에 생성되는 모든 그리드에서는 del 키가 선택된 셀의 내용만 지워집니다.
QBOX.QCELL.config.delkeymode = "focus";

그리드 단위별 설정
그리드 생성을 위한 포로퍼티에 아래 부분을 추가하면 됩니다.
설정하지 않으면 기본적으로 'select'이며 selectmode 단위로 지워집니다. row, rows, cell, cells
delkeymode : 'focus'
*전역으로 선언했어도 그리드 내에서 추가로 선언하면 그리드에 설정한 것이 적용됩니다.