기초튜토리얼 [Wijmo 시작하기] CollectionView 사용법
페이지 정보
작성자 GCK루시 작성일 2023-03-09 10:15 조회 445회 댓글 0건본문
관련링크
Wijmo (위즈모)는 비즈니스 애플리케이션의 다양한 요구 조건을 충족할 수 있는 UI 자바스크립트 라이브러리 제품으로, 그리드(Grid), 차트(Chart), OLAP 피벗, Input (텍스트박스, 콤보박스, 달력 등..)과 같이 데이터를 시각화하고 관리할 수 있는 다양한 UI 컨트롤을 제공하고 있습니다.
Wijmo에서는「FlexGrid(플렉스그리드)」또는 「FlexChart(플렉스차트)」라는 하이 퍼포먼스를 지닌 UI 컨트롤 사용이 가능하지만 해당 컨트롤의 데이터를 관리하는 기능으로서 「CollectionView(컬렉션 뷰)」를 제공하고 있습니다. 이번 포스팅에서는 Wijmo의 뒤에서 지원하는 데이터 관리 클래스 "CollectionView"에 대해 설명하도록 하겠습니다.
목차
1. 개발 환경
2. CollectionView란?
1) XAML 플랫폼의 CollectionView
2) Wijmo의 CollectionView
3. CollectionView 사용해보기
1) Wijmo 참조
2) 초기화 처리 및 데이터 표시
4. FlexGrid와 함께 사용해보기
1) 참조 추가
2) 더미 배열 데이터 설정
5. CollectionView에서 변경 내용 추적
6. 마치며
ICollectionView |
현재 레코드 관리, 사용자정의 정렬, 필터링, 그룹화를 제공합니다. |
IEditableCollectionView |
항목을 편집, 추가, 삭제하는 메소드를 제공합니다. |
IPagedCollectionView |
페이징을 제공합니다. |
index.html |
페이지 메인. 페이지의 요소로 다양한 컨트롤을 배치합니다. |
app.js |
CollectionView의 다양한 기능을 구현하기 위한 코드를 입력합니다. |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CollectionView 시작하기</title> <!-- Wijmo 핵심 모듈(필수) --> <script src="scripts/wijmo.min.js"></script> <script src="scripts/app.js"></script> </head> <body> <ul id="product_list"></ul> </body> </html>
let products = [ { productId: 1, productName: "과즙100% 오렌지", unitPrice: 200 }, { productId: 2, productName: "과즙100% 포도", unitPrice: 200 }, { productId: 3, productName: "과즙100% 레몬", unitPrice: 1000 }, { productId: 4, productName: "과즙100% 복숭아", unitPrice: 1000 }, { productId: 5, productName: "커피", unitPrice: 1000 }, { productId: 6, productName: "에스프레소", unitPrice: 1000 }, { productId: 7, productName: "커피우유", unitPrice: 500 }, { productId: 8, productName: "맥주", unitPrice: 100 }, { productId: 9, productName: "탄산수", unitPrice: 2500 }, { productId: 10, productName: "와인", unitPrice: 210 } ] document.addEventListener("DOMContentLoaded", function () { // 데이터 배열을 기반으로 CollectionView 생성 let view = new wijmo.collections.CollectionView(products); // unitPrice의 내림차순으로 정렬 let sortDesc = new wijmo.collections.SortDescription('unitPrice', false); view.sortDescriptions.push(sortDesc); // unitPrice가 200보다 큰 항목만 표시 view.filter = (item) => { return item.unitPrice > 200 }; // 정렬 및 필터링 처리한 결과를 목록에 추가 view.items.forEach((item) => { var newlist = document.createElement("li"); var newtxt = document.createTextNode(item.productId + ': ' + item.productName + ' ' + item.unitPrice); newlist.appendChild(newtxt); document.getElementById("product_list").appendChild(newlist); }); });
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CollectionView 시작하기</title> <!-- Wijmo 스타일(필수) --> <link href="css/wijmo.min.css" rel="stylesheet" /> <!-- Wijmo 핵심 모듈(필수) --> <script src="scripts/wijmo.min.js"></script> <!-- FlexGrid 모듈(필수) --> <script src="scripts/wijmo.grid.min.js"></script> <!-- Wijmo custom culture (옵션, 원하는 문화권을 추가) -> <script src="scripts/wijmo.culture.ko.min.js"></script> <script src="scripts/app.js"></script> </head> <body> <div id="Wijmo_FlexGrid" style="height: 400px; width:800px"></div> </body> </html>
・・・(생략) document.addEventListener("DOMContentLoaded", function () { // 데이터 배열을 기반으로 CollectionView 생성 let view = new wijmo.collections.CollectionView(products); let flexGrid = new wijmo.grid.FlexGrid('#Wijmo_FlexGrid', { itemsSource: view, }) });
・・・(생략) document.addEventListener("DOMContentLoaded", function () { // 데이터 배열을 기반으로 CollectionView 생성 let view = new wijmo.collections.CollectionView(products); // unitPrice의 내림차순으로 정렬 let sortDesc = new wijmo.collections.SortDescription('unitPrice', false); view.sortDescriptions.push(sortDesc); // unitPrice가 200보다 큰 항목만 표시 view.filter = (item) => { return item.unitPrice > 200 }; let flexGrid = new wijmo.grid.FlexGrid('#Wijmo_FlexGrid', { itemsSource: view, }) });
itemsAdded |
변경 추적을 사용하도록 설정한 다음 컬렉션에 추가된 레코드가 포함된 배열을 가져옵니다. |
itemsEdited |
변경 추적을 사용하도록 설정한 다음 컬렉션에서 편집된 레코드가 포함된 배열을 가져옵니다. |
itemsRemoved |
변경 추적을 사용하도록 설정한 다음 컬렉션에서 삭제된 레코드가 포함된 배열을 가져옵니다. |
지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.