그리드 확장
그리드 CRUD (생성 / 읽기 / 갱신 / 삭제) 처리에 대한 상태정보
CRUD는 소프트웨어에서 기본적인 데이터 처리 기능을 의미하는 용어로 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 포함합니다.
아래 QCELL 예제에서는 셀렉트 박스를 사용하여 열을 구성하고 값과 레이블이 동일합니다.
새로운 행을 생성하려면 생성할 행을 선택하고 "추가" 버튼을 클릭하면 새로운 행이 만들어집니다.(qcell.insertRow(nRow);)
삭제하려는 행을 선택하고 "삭제" 버튼을 클릭하면 해당 행이 삭제됩니다.(qcell.deleteRow(nRow);)
데이터를 수정하고 싶은 행과 셀을 선택한 후 데이터를 변경하면 수정이 됩니다.
이러한 3가지 기능을 수행할 때마다 QCELL은 해당 정보를 유지하며 상태 정보 관련 API를 통해 필요한 기능을 실행할 수 있습니다.
Step 1: 행 상태 정보
getState(state)
지정한 타입의 행 상태 정보를 반환합니다.QCell1.getState('i');
getStates()
행 상태 정보들을 반환합니다.
QCell1.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"}}]
}
F12 개발자 도구 콘솔 창에 입력하면 d(삭제된 값), i(추가된 값), u(수정된 값)에 대한 정보를 확인할 수 있습니다.
변경된 데이터 정보(d, u, i)는
반환된 객체로 qcell.getState("i").length를 통해 추가된 행의 수를 확인하고, qcell.getState("i").row를 통해 행의 위치와 qcell.getState("i").data를 통해 데이터를 얻을 수 있습니다.
이벤트 객체를 활용하거나 qcell 함수를 사용하여 필요한 로직을 작성할 수 있습니다.
getStatesEx(propertyName)
행 상태 정보들을 반환합니다.QCell1.getStatesEx();
getAllStates()
모든 행에 대한 상태 정보들을 반환합니다.
QCell1.getAllStates();
getStatesBySep(rowSep, colSep)
행 상태 정보들을 구분자 형태로 반환합니다.Name : colSep / Type : string / 설명 : (optional) 열구분자
QCell1.getStatesBySep();
getAllStatesBySep(strStateName, strRowName)
모든 행 상태 정보들을 구분자 형태로 반환합니다.Name : strRowName / Type : string / 설명 : (optional) 행번호 표시명
QCell1.getAllStatesBySep();
Step 2: 행 상태 정보 삭제
clearStates()
삭제정보를 포함한 모든 상태정보를 삭제합니다.
QCell1.clearStates();
clearRowStates()
모든 상태정보를 삭제한다.
QCell1.clearRowStates();