! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

[Wijmo 시작하기] FlexGrid 사용법 - 활용편 > 온라인 스터디

본문 바로가기

기초튜토리얼 [Wijmo 시작하기] FlexGrid 사용법 - 활용편

페이지 정보

작성자 GCK루시 작성일 2023-03-15 09:41 조회 758회 댓글 0건

본문

Wijmo (위즈모)는 비즈니스 애플리케이션의 다양한 요구 조건을 충족할 수 있는 UI 자바스크립트 라이브러리 제품으로, 그리드(Grid), 차트(Chart), OLAP 피벗, Input (텍스트박스, 콤보박스, 달력 등..)과 같이 데이터를 시각화하고 관리할 수 있는 다양한 UI 컨트롤을 제공하고 있습니다.


Wijmo에는 40개가 넘는 컨트롤을 지원하고 있지만, 그 중 가장 인기가 높은 컨트롤은 고속 · 경량의 다기능 데이터 그리드 컨트롤인 "FlexGrid (플렉스 그리드)" 입니다. 이번 포스팅에서는 필터, 그룹화, 페이징 등 FlexGrid의 사용성을 향상시키는 편리한 기능의 사용법을 안내 하도록 하겠습니다.


 목차 


1. 개발 환경 

2. FlexGrid의 사용성을 향상시키는 기능

   1) 필터 추가

   2) 데이터 그룹화

   3) 데이터 페이징

3. 마치며






 개발환경 


이번 포스팅에서도 전 편과 동일한 개발 환경을 사용하였습니다.



시작하기 앞서 Web API로부터 가져온 데이터를 FlexGrid 상에 표시할 수 있게 설정해주셔야 합니다. 사용할 파일의 세부 사항은 다음과 같습니다.


 index.html

 페이지 메인. 페이지 요소에 FlexGrid를 배치합니다. 

 app.js

 FlexGrid의 데이터 표시 등 다양한 기능을 구현하기 위한 코드를 입력합니다. 


「index.html」파일에 아래 내용을 추가하여 Wijmo의 모듈이나 stylesheet 그리고 FlexGrid를 호스팅할 컨테이너 부분에 대해서 정의합니다.


※ 참조하고 있는 Wijmo의 모듈이나 스타일 시트는 별도 프로젝트 폴더에 추가해주시기 바랍니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>FlexGrid 시작하기</title>


    <!-- Wijmo 스타일(필수) -->
    <link href="css/wijmo.min.css" rel="stylesheet" />
    <!-- Wijmo 코어 모듈(필수) -->
    <script src="scripts/wijmo.min.js"></script>
    <!-- Wijmo 컨트롤(옵션。필요한 컨트롤만 추가) -->
    <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="width: auto; height: 600px;"></div>
</body>

</html>


「app.js」에는 아래의 코드를 추가해주시기 바랍니다.


// Web API 엔드포인트 지정

const demo_Url = "https://demodata.grapecity.com/northwind/api/v1/Orders";

document.addEventListener("DOMContentLoaded", function () {
    var columnsdata = [
        { binding: 'shipName', header: '이름', width:300 },
        { binding: 'shipCountry', header: '나라', width:150 },
        { binding: 'shipPostalCode', header: '우편번호', width:150 },
        { binding: 'shipAddress', header: '주소', width: 300 },
        { binding: 'shippedDate', header: '등록일자', dataType: 'Date', format: 'yyyy/M/d', width:150 }
    ];

    let cv = new wijmo.collections.CollectionView();

    wijmo.httpRequest(demo_Url, {
        success: (xhr) => {
            //JSON 데이터를 직렬화할 때 형변환 함수 호출
            cv.sourceCollection = JSON.parse(xhr.response, reviver);
        }
    })

    //Wijmo.FlexGrid 인스턴스
    var flexGrid = new wijmo.grid.FlexGrid('#Wijmo_FlexGrid', {
        autoGenerateColumns: false,
        columns: columnsdata,
        itemsSource: cv
    });
});


 function reviver(key, val) {
    // "yyyy-mm-ddT" 문자열을 날짜 데이터로 설정
    if (typeof (val) == "string" &&
        val.match(/^\d{4}-\d{2}-\d{2}T.*/)) {
        return new Date(Date.parse(val)); // Date 타입으로 변환
    } 
 return val;
}


FlexGrid의 "autoGenerateColumns"속성을 "false"로 설정하여 열 정의를 자동으로 설정하지 않고 "columns"속성을 통해 열 정의를 설정한 뒤 데이터 그리드에 표시합니다.


"columns" 속성으로 설정된 "columnsdata" 중에서 연결할 열(binding), 열 헤더에 표시할 문자열(header), 너비(width) 등을 지정합니다. 해당 열 정의를 FlexGrid의 인스턴스로 설정하여 데이터 목록의 레이아웃을 정의합니다.


또한 JSON.parse 메서드의 두번째 인수로 reviver 함수를 설정하여 직렬화 처리 중에 데이터 가공이 가능하게 됩니다. 이번에 설정된 "reviver" 함수에서 날짜 항목에 저장된 string 유형의 항목을 Date형으로 변환하는 처리를 실시하고 있습니다.


작성이 완료되면 Visual Studio Code에서 index.html을 마우스 오른쪽 버튼으로 클릭하고 Open with Live Server를 실행합니다.


b0e4ff1e5eec93b9e55f91a41453904f_1678843868_0279.png
 

실행하면 브라우저의 FlexGrid에 API에서 가져온 데이터가 표시됩니다.



b0e4ff1e5eec93b9e55f91a41453904f_1678843888_2094.png



 FlexGrid의 사용성을 향상시키는 기능 


FlexGrid를 사용하면 데이터 필터링, 그룹화 및 페이징과 같은 어플리케이션에서 사용성 향상에 필수적인 기능을 쉽게 구현할 수 있습니다.


 1) 필터 추가 


FlexGrid에서는 Excel과 같은 dialog에서 조건을 지정하여 필터링 할 수 있습니다. 필터 기능을 활성화하기 위해 index.html 파일에 다음 모듈에 대한 참조를 추가해주시기 바랍니다.


※ 프로젝트에서 참조가 추가된 모듈을 별도로 복사해주시기 바랍니다.


・・・(생략)・・・

<!-- Wijmo 코어 모듈(필수) -->
<script src="scripts/wijmo.min.js"></script>

<!-- Wijmo 컨트롤(옵션。필요한 컨트롤만 추가) -->
<script src="scripts/wijmo.grid.min.js"></script>
<script src="scripts/wijmo.grid.filter.min.js"></script>
<script src="scripts/wijmo.input.min.js"></script>

<!-- Wijmo custom culture(옵션, 원하는 문화권을 추가) -->
<script src="scripts/wijmo.culture.ko.min.js"></script>

<script src="scripts/app.js"></script>

・・・(생략)・・・


참조를 추가한 뒤, 「app.js」에 있는 FlexGrid  객체를 인스턴스화함으로 필터를 사용할 수 있게 됩니다.


・・・(생략)・・・

//Wijmo.FlexGrid 인스턴스화
var flexGrid = new wijmo.grid.FlexGrid('#Wijmo_FlexGrid', {
    autoGenerateColumns: false,
    columns: columnsdata,
    itemsSource: cv
});


// 필터 설정
var filter = new wijmo.grid.filter.FlexGridFilter(flexGrid);
・・・(생략)・・・


실행하면 아래와 같이 헤더에 추가된 아이콘에서 Excel과 같은 필터를 사용할 수 있습니다.



b0e4ff1e5eec93b9e55f91a41453904f_1678844444_9799.gif

 

 2) 데이터 그룹화 


FlexGrid에서는 특정 열을 기준으로 데이터를 그룹화하고 표시할 수 있습니다. FlexGrid의 인스턴스로부터 CollectionView를 가져와 그룹화, 정렬 조건을 지정하여 그룹으로 분류 및 그룹 헤더를 추가하여 FlexGrid가 표시됩니다.


・・・(생략)・・・

let cv = new wijmo.collections.CollectionView();

cv.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('shipCountry', (item, name) => { return item.shipCountry; }));

// 그룹화된 항목으로 정렬
cv.sortDescriptions.push(new wijmo.collections.SortDescription('shippedDate', true));

・・・(생략)・・・


실행하면, 다음과 같이「shipCountry」(나라) 항목으로 그룹화되고 「shippedDate」(등록일자)로 정렬된 상태로 표시되며 그룹별로 접어 둘 수도 있습니다.


b0e4ff1e5eec93b9e55f91a41453904f_1678844461_0051.gif
 


 3) 데이터 페이징 


비즈니스 애플리케이션 등에서 대량의 데이터를 표시하는 경우 페이징하여 적절한 양의 데이터만 포함하는 그리드를 생성함으로써 데이터의 가시성과 성능 향상을 기대할 수 있습니다.


FlexGrid로 페이징을 실시하는 경우, CollectionViewNavigator 컨트롤을 사용해 클라이언트 측에서 페이징하는 것이 가능합니다.


다음과 같이 「index.html」에 추가하고 페이지 이동을 위한 네비게이터를 표시하는 컨테이너 부분을 정의합니다.


・・・(생략)・・・

<body>
    <div id="Pager"></div>
    <div id="Wijmo_FlexGrid" style="width: auto; height: 600px;"></div>
</body>

・・・(생략)・・・


또한 "app.js"를 다음과 같이 추가합니다. CollectionView 의 'pageSize' 속성은 한 페이지에 표시할 데이터 수를 정의하고 CollectionViewNavigator의 'byPage' 속성에서 페이지 이동을 활성화하고 'headerFormat' 속성에서 네비게이터 형식을 정의합니다.

・・・(생략)・・・

cv.pageSize = 10; 

// 페이지 네비게이트 처리
new wijmo.input.CollectionViewNavigator('#Pager', {
    byPage: true,
    headerFormat: '{currentPage:n0} / {pageCount:n0} 페이지',
    cv: cv

});

・・・(생략)・・・


실행 시 데이터는 아래와 같이 10개 행마다 페이징되어 그리드에 표시됩니다. 네비게이터는 한 페이지씩 이동할 수 있을 뿐만 아니라 첫 페이지와 마지막 페이지로 이동할 수 있습니다.



 


 

이번에 소개한 각종 설정은 아래의 데모 어플리케이션에서도 확인할 수 있습니다. 




 마치며 


이번 포스팅에서는 Wijmo FlexGrid의 사용성을 향상시키는 필터링, 그룹화, 페이징과 같은 유용한 기능에 대해 소개하였습니다. 비즈니스 애플리케이션에 요구되는 세세한 요건을 구현하는 기능을 풍부하게 갖추고 있으므로 데이터 그리드가 필요하실 때 Wijmo를 이용하여 개발해보시기 바랍니다.


다음 포스팅에서는 FlexGrid 또 다른 활용 방법에 대해 소개하도록 하겠습니다.


다음 시리즈 글도 기대해주세요!





지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!

wj.png

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.