WebSquare.uiplugin.dataList는 화면에서 사용되는 데이터를 저장하고 관리하기 위한 객체로, 다건 데이터 처리를 용이하게 만들어줍니다. 이 객체는 데이터의 구조를 정의하는 Column Info 영역과 데이터를 담고 있는 Data 영역으로 구성됩니다. 이 글에서는 DataList의 주요 개념과 기능을 간략히 소개합니다.
1. DataList의 구조
1.1 Column Info 영역
역할: 데이터 구조를 정의합니다.
속성:
id: 컬럼의 이름 정의
기타 데이터 가공 속성 추가 가능
1.2 Data 영역
역할: 데이터의 초기값을 정의합니다.
use 속성: 초기값 적용 여부를 설정 (use="true" 시 초기값 적용)
2. DataList의 주요 기능
2.1 데이터 상태 관리
DataList는 각 행의 데이터 상태를 다음과 같이 관리합니다:
R (0): 초기 상태
U (1): 갱신된 데이터
C (2): 삽입된 데이터
D (3): 삭제된 데이터
V (4): 삽입 후 삭제된 데이터
E (5): 제거된 데이터
2.2 데이터 CRUD 작업
삽입:insertRow, insertData, insertJSON 등 사용
갱신:setCellData, setRowData 등 사용
삭제:deleteRow, removeRow 등 사용
조회:getAllData, getModifiedJSON 등 다양한 API 제공
3. 주요 API 소개
3.1 데이터 조회
getAllData: 전체 데이터를 배열로 반환
getModifiedJSON: 변경된 데이터를 JSON 형식으로 반환
getRowData(rowIndex): 특정 행의 데이터를 배열로 반환
3.2 데이터 삽입
insertRow(rowIndex): 새로운 행 추가
insertJSON(rowIndex, dataObj): JSON 데이터를 기반으로 행 추가
3.3 데이터 갱신
setCellData(rowIndex, colIndex, data): 특정 셀 데이터 갱신
setRowData(rowIndex, rowData, overwrite): 특정 행 데이터 갱신
3.4 데이터 삭제
deleteRow(rowIndex): 특정 행 삭제 상태로 변경
removeRow(rowIndex): 특정 행을 완전히 삭제
4. 이벤트 관리
DataList는 다양한 이벤트를 통해 데이터 변경에 반응할 수 있습니다.
oncelldatachange: 셀 데이터 변경 시 발생
ondataload: 데이터가 로드된 후 발생
oninsertrow: 행이 추가된 후 발생
onremoverow: 행이 제거된 후 발생
5. 활용 예제
5.1 데이터 삽입 예제
// JSON 데이터 삽입
var data = [{"name": "홍길동", "age": 30}, {"name": "이순신", "age": 40}];
dataList1.insertJSON(0, data);
5.2 데이터 조회 예제
// 변경된 데이터 조회
var modifiedData = dataList1.getModifiedJSON();
console.log(modifiedData);
5.3 데이터 삭제 예제
// 특정 행 삭제
var removedData = dataList1.removeRow(1);
console.log(removedData);
6. 결론
WebSquare.uiplugin.dataList는 데이터 처리와 상태 관리에 강력한 기능을 제공합니다. 이를 활용하면 화면에서의 데이터 관리가 더욱 효율적이고 체계적으로 이루어질 수 있습니다. 다양한 API와 이벤트를 적절히 활용해 프로젝트의 생산성을 높여보세요!
