기초튜토리얼 [Wijmo 시작하기] FlexGrid 사용법 - 기본 기능편
페이지 정보
작성자 GCK루시
작성일 2022-12-07 14:08 조회 536회
댓글 0건
본문
관련링크
Wijmo (위즈모)는 비즈니스 애플리케이션의 다양한 요구 조건을 충족할 수 있는 UI 자바스크립트 라이브러리 제품으로, 그리드(Grid), 차트(Chart), OLAP 피벗, Input (텍스트박스, 콤보박스, 달력 등..) 과 같이 데이터를 시각화 하고 관리할 수 있는 다양한 UI 컨트롤을 제공하고 있습니다.
이번 포스팅에서는 그중 가장 인기 있는 컨트롤이자 빠르고 유연한 특징을 가진 FlexGrid의 기본 기능에 대해 소개하도록 하겠습니다.
목차
- 개발 환경
- FlexGrid에 데이터 보여주기
- Wijmo 참조
- FlexGrid 정의
- 초기화 과정과 데이터 표시 - FlexGrid의 유용한 기본 기능
- 항목 서식 변경
- 행/열 고정
- 편집 모드 전환 - 마치며
개발 환경
이번 포스팅에서는 아래 개발 환경을 사용하였습니다.
index.html |
페이지 메인. 페이지 요소에 FlexGrid를 배치합니다. |
app.js |
FlexGrid의 데이터 표시 등 다양한 기능을 구현하기 위한 코드를 입력합니다. |
<!-- index.html -->
<!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></body>
</html><!-- index.html --> <body> <div id="theGrid" style="height: 600px;"></div> </body>
// app.js
document.addEventListener("DOMContentLoaded", function () {
let flexGrid = new wijmo.grid.FlexGrid("#theGrid", {
itemsSource: getData(),
});
});
function getData() {
var datasource = [
{
열1: "가나다라마",
열2: "ABCDEFG",
열3: "그레이프시티",
열4: true,
열5: 12345,
},
{
열1: "안녕하세요.",
열2: "sales-kor@grapecity.com",
열3: "서울특별시",
열4: false,
열5: 67890,
},
];
return datasource;
}이상으로 FlexGrid에 데이터 표시에 대한 준비가 완료되었습니다.
4. 실행하기
Visual Studio Code에서 "index.html"을 마우스 오른쪽 단추로 클릭한 뒤 Open with Live Server를 실행합니다.
실행 후 아래 화면과 같이 브라우저에 FlexGrid가 브라우저 화면에 표시됩니다.
이제 FlexGrid에서 데이터 표시의 기본 단계를 마무리합니다.
다음 단계인 FlexGrid의 다양한 기능 사용법을 소개하기 전에 화면에 표시된 더미 데이터의 항목과 건수를 늘리기 위해, 아래와 같이 "app.js" 를 재작성해 지정한 count만큼 더미 데이터가 나타날 수 있도록 합니다.
// app.js
document.addEventListener("DOMContentLoaded", function () {
let flexGrid = new wijmo.grid.FlexGrid("#theGrid", {
itemsSource: getData(20),
});
});
function getData(count) {
var datasource = [
{
열1: "가나다라마",
열2: "ABCDEFG",
열3: "그레이프시티",
열4: true,
열5: 12345,
},
{
열1: "안녕하세요.",
열2: "sales-kor@grapecity.com",
열3: "서울특별시",
열4: false,
열5: 67890,
},
];
if (count > 0) {
var customers =
"놀이공원,테마파크,동물원,슈퍼마켓,대형마트,백화점,유원지,선술집,레스토랑".split(
","
);
var reps = "박용남, 추민용, 하재윤, 류정화, 신선빈, 표수정".split(",");
var products =
"아메리카노,포도주스,오렌지주스,카페라떼,캐모마일,사과주스,에스프레소,마끼야또,청포도스무디".split(
","
);
var rnddata = [];
for (var i = 0; i < count; i++) {
var rnddate = new Date();
rnddate.setDate(rnddate.getDate() - Math.floor(Math.random() * 365));
rnddata.push({
고객: customers[Math.floor(Math.random() * customers.length)],
담당자: reps[Math.floor(Math.random() * reps.length)],
주문일자: rnddate,
제품명: products[Math.floor(Math.random() * products.length)],
금액: Math.floor(Math.random() * 5000),
수량: Math.floor(Math.random() * 2000),
플래그: Math.floor(Math.random() * 30) % 3 == 0,
});
}
return rnddata;
} else {
return datasource;
}
}실행하면 아래와 같이 20개의 랜덤 데이터가 그리드에 표시됩니다.
FlexGrid의 유용한 기본 기능
FlexGrid는 비즈니스 애플리케이션에서 사용할 수 있는 편리한 기능을 풍부하게 갖추고 있습니다.
그중 몇 가지 기본적인 사용법을 소개하겠습니다.
항목의 서식 변경
이전 단계까지, 수치형 자료를 표시하고 있는 「금액」과 「수량」의 열이 구별하기 어렵기 때문에 「금액」의 열을 통화 서식으로 표시 처리합니다.
이를 위해 초기화 처리 중 「format」속성에 통화 표시(currency)를 지정하는 「c」를 할당하여「대한민국 원(￦)」마크가 나타나도록 구현합니다.
//app.js //열의 서식 설정 flexGrid.columns[4].format = "c";
통화 기호표시는 애플리케이션이 적용된 문화권에 따라 다르게 나타납니다.
샘플에서는 "index.html"에서 한국어 문화권 script를 설정했으므로 "￦"가 표시됩니다.
<!-- index.html --> <!-- Wijmo custom culture (옵션, 원하는 문화권을 추가) --> <script src="scripts/wijmo.culture.ko.min.js"></script>
행 및 열 고정
고정 처리하고 싶은 행이나 열을 지정하여 Excel과 같은 고정 행·열 표시를 구현할 수 있습니다.
아래 코드와 같이 설정하면 첫 번째 열인 '분류' 열과 위에서 두 번째 행까지 고정됩니다.
// 열 고정 flexGrid.frozenColumns = 1; // 행 고정 flexGrid.frozenRows = 2;
편집 모드 전환
FlexGrid는 데이터를 표시하는 목적 이외에도, 표시한 데이터를 편집하는 유저 인터페이스로 이용할 수 있습니다.
일반적으로 Excel처럼 셀을 더블 클릭하거나 F2 키를 눌러 셀 데이터를 편집하는 모드를 지원합니다.
이대로도 충분하지만, 데이터 편집 사용을 전제하여 셀에 포커스가 되었을 때 바로 편집 모드로 변경 처리된다면 유저에게 보다 나은 편리성을 제공할 수 있습니다.
해당 액션은 FlexGrid에서는 그리드가 포커스를 받았을 때(gotFocus 이벤트)와 선택한 셀이 변경되었을 때(selectionChanged 이벤트) 발생하는 각각의 이벤트로 제어할 수 있으며, 해당 이벤트를 사용하여 FlexGrid의 상태를 모니터링하고 사용자 작업에 맞게 편집 모드를 전환할 수 있습니다.
//app.js
// 상시 편집 모드
// 그리드가 포커스를 받았을 때 편집 모드 시작
flexGrid.gotFocus.addHandler((s, e) => {
s.startEditing(false);
});
// 선택할 셀이 바뀌었을 때 편집 모드 시작
flexGrid.selectionChanged.addHandler((s, e) => {
setTimeout(() => {
s.startEditing(false);
});
});
이번에 소개한 각종 설정은 아래 샘플에서도 확인할 수 있습니다.
마치며
Wijmo의 주요 컨트롤 중 하나인 FlexGrid의 기본 기능에 대해 소개했습니다. 비즈니스 애플리케이션에 요구되는 세세한 요건을 구현하는 기능을 풍부하게 갖추고 있으므로 데이터 그리드가 필요하실 때 Wijmo를 이용하여 개발해보시기 바랍니다.
다음 포스팅에서는 FlexGrid 외관을 커스터마이징하는 방법에 대해 소개하도록 하겠습니다.
다음 시리즈 글도 기대해주세요!
지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
