기초튜토리얼 [Wijmo 시작하기] FlexGrid 사용법 - 스타일편
페이지 정보
작성자 GCK루시
작성일 2022-12-13 14:23 조회 531회
댓글 0건
본문
관련링크
Wijmo (위즈모)는 비즈니스 애플리케이션의 다양한 요구 조건을 충족할 수 있는 UI 자바스크립트 라이브러리 제품으로, 그리드(Grid), 차트(Chart), OLAP 피벗, Input (텍스트박스, 콤보박스, 달력 등..)과 같이 데이터를 시각화하고 관리할 수 있는 다양한 UI 컨트롤을 제공하고 있습니다.
이번 포스팅에서는 그중 가장 인기 있는 컨트롤이자 빠르고 유연한 특징을 가진 FlexGrid의 외관을 커스터마이징하는 방법에 대해 소개하도록 하겠습니다.
목차
- 개발 환경
- FlexGrid의 외관을 사용자 정의하는 방법
1) 스타일 시트로 FlexGrid의 모양을 사용자 정의
- FlexGrid 너비와 높이 설정
- FlexGrid의 열 헤더 스타일 설정
- FlexGrid의 셀 스타일 설정
2) 속성으로 FlexGrid의 외관을 사용자 정의
- FlexGrid의 열 너비를 자동으로 조정
- FlexGrid의 열 너비를 개별적으로 설정
- FlexGrid의 행 높이 설정 - 마치며
개발 환경
이번 포스팅에서는 아래 개발 환경을 사용하였습니다.
또 FlexGrid 사용법-기본 기능편에서 작성한 코드를 바탕으로 진행할 예정입니다.
사용할 파일의 세부 사항은 다음과 같습니다. 이번 편에서는 스타일을 정의하는 style sheet 파일로 "styles.css"를 새로 추가했습니다.
index.html |
페이지 메인. 페이지의 요소로 FlexGrid를 배치합니다. |
app.js |
FlexGrid의 데이터 표시 등 다양한 기능을 구현하기 위한 코드를 입력합니다. |
styles.css |
FlexGrid나 각종 페이지 요소의 스타일 정의를 합니다. |
FlexGrid의 외관을 사용자 정의하는 방법
FlexGrid를 비롯한 Wijmo 컨트롤 외관을 커스터마이징하기 위해 일부 속성과 메서드를 사용할 수 있지만 기본적으로 웹 페이지의 외관을 사용자 정의하는 용도로 널리 사용되는 CSS (Cascading Style Sheets)를 사용합니다.
또한 Wijmo는 CSS의 기능 향상판으로 자리매김하고 있는 Sass(Syntactically Awesome Style Sheets)도 지원하고 있습니다.
1) 스타일 시트로 FlexGrid의 모양을 사용자 정의
이번 포스팅에서는 FlexGrid에서 일반적으로 사용되는 스타일링을 설명하도록 하겠습니다.
FlexGrid 너비와 높이 설정
우선 가장 기본적인 방법으로 FlexGrid의 높이와 너비 설정입니다. 초기 상태에서는 FlexGrid는 화면의 가장자리까지 표시되어 오른쪽 영역에 추가적인 margin이 생깁니다.
따라서 "styles.css"에 다음과 같은 스타일 설정을 추가하여 FlexGrid의 높이와 너비를 설정합니다. 스타일의 설정 방법은 다양한 종류가 있지만, 이번에는 자주 사용되는 아이디 선택자로 지정하고 있습니다.
// styles.css
#theGrid {
width: 960px;
height: 500px;
}아이디 선택자를 사용하려면 머리에 "#"를 붙여 아이디를 정의합니다. 이번에는 "theGrid"라는 아이디를 만들었습니다.
또한 생성한 'styles.css'를 로드하도록 'index.html'에 참조 설정을 추가하고 FlexGrid를 정의하는 div 요소의 id 속성에 앞서 만든 "theGrid"를 설정합니다.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FlexGrid 시작하기</title>
<!-- Wijmo 스타일（필수） -->
<link href="css/wijmo.min.css" rel="stylesheet" />
<link href="css/styles.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="theGrid"></div>
</body>
</html>
실행하면 다음과 같이 FlexGrid 영역의 너비와 높이를 조정할 수 있습니다.
FlexGrid의 열 헤더 스타일 설정
다음으로 FlexGrid의 열 헤더 부분의 배경색이나 폰트 색상 등의 스타일을 설정하도록 하겠습니다.
이전과 같이 그리드 전체에 스타일을 적용하는 방법으로는 열 머리글 부분에만 스타일을 적용할 수 없습니다.
FlexGrid에서는 그리드의 셀이나 헤더 부분에 스타일을 적용하기 위한 기능으로서 cssClass 속성과 cssClassAll 속성을 제공하고 있습니다. 헤더 부분에 스타일을 적용하기 위해서 'cssClassAll' 속성을 사용하여 만든 클래스를 설정합니다.
우선은 헤더에 적용할 클래스 'column-header'를 작성합니다. 그 다음 배경색(background-color)과 전경색(color) 외에 글꼴 크기(font-size)와 가로 정렬(text-align)도 지정합니다.
일부 항목은 Wijmo의 기본 스타일을 무시하기 위해 '!important'를 함께 설정합니다.
// styles.css
.column-header {
font-size: large;
text-align: center !important;
color: white !important;
background-color: #001871 !important;
}app.js에서 열 헤더의 Row 객체의 cssClassAll 속성에 만든 클래스를 설정합니다.
// app.js // 스타일 정의한 CSS 적용 flexGrid.columnHeaders.rows[0].cssClassAll = 'column-header';
실행하면 아래와 같이 그리드의 헤더 부분에 작성한 스타일을 적용할 수 있습니다.
FlexGrid의 셀 스타일 설정
다음으로 FlexGrid의 헤더 이외의 셀에 대해서 스타일을 설정하는 방법을 소개합니다.
이번에는 '분류' 열에 대해 헤더를 제외한 모든 셀의 배경색과 전경색을 변경해 보겠습니다. 다음과 같은 스타일을 'styles.css'에 추가합니다.
// styles.css
.cell-category {
color: white !important;
background-color: #ff585d !important;
}그런 다음 만든 스타일을 '분류' 열의 Column 객체의 cssClass 속성으로 설정합니다.
// app.js // 스타일 정의된 CSS 적용 flexGrid.columns[1].cssClass = 'cell-category';
실행하면 다음과 같이 '분류' 열의 셀 스타일을 변경할 수 있습니다.
2) 속성으로 FlexGrid의 모양을 사용자 정의
FlexGrid의 열 너비를 자동으로 조정
지금까지 CSS를 사용하는 방법을 소개했지만, 일부 외관의 설정은 FlexGrid가 제공하는 속성이나 메서드로부터 설정할 수도 있습니다.
'autoSizeColumns' 메서드를 사용하면 표시할 데이터의 길이에 따라 열의 너비를 자동으로 조정 및 표시할 수 있습니다.
// app.js // 자동 열 너비 조정 flexGrid.autoSizeColumns();
실행하면 아래와 같이 표시하는 데이터의 길이에 따라 열의 너비가 자동으로 변경됩니다.
FlexGrid의 열 너비를 개별적으로 설정
열 너비를 개별적으로 설정하려면 Column 객체의 'width' 속성에서 설정합니다. 또, 같은 객체의 'align' 속성을 사용해 문자의 수평 방향의 배치도 설정할 수가 있습니다.
// app.js //flexGrid.autoSizeColumns(); flexGrid.columns[0].width = 240; flexGrid.columns[0].align = 'center';
실행하면 아래와 같이 '분류 코드' 열만 너비를 확대하고 문자를 중앙 정렬로 만들 수 있었습니다.
FlexGrid의 행 높이 설정
FlexGrid 로 모든 행의 높이를 일괄적으로 변경하고자 하는 경우, 'defaultSize' 속성을 사용해, 모든 행의 높이를 변경할 수 있습니다. 또한 Column 객체의 'wordWrap' 속성을 'true'로 설정하여 문자열을 줄바꿈하여 표시할 수 있습니다.
// app.js flexGrid.rows.defaultSize = 60; flexGrid.columns[4].width= 70; // 임의로 너비 조정 flexGrid.columns[4].wordWrap = true;
실행하면 아래와 같이 모든 행의 높이를 변경할 수 있었습니다. 또한 '제품명' 열에 있어서, 데이터의 길이가 행의 너비보다 긴 경우, 문자열이 감싸져 표시됩니다.
또한 특정 행의 높이만 변경하려면 Row 객체의 'size' 속성을 사용합니다. 아래에서는 세 번째 행만 높이를 변경합니다.
// app.js // flexGrid.rows.defaultSize = 60; // flexGrid.columns[4].width= 70; // 임의로 너비 조정 flexGrid.columns[4].wordWrap = true; flexGrid.rows[2].size = 60;
이번에 소개한 각종 설정은 아래의 샘플에서도 확인할 수 있습니다.
마치며
이번에는 Wijmo의 주요 컨트롤 중 하나인 FlexGrid의 외관을 사용자 정의하는 방법에 대해 소개했습니다. FlexGrid을 통해 사용자의 요구를 충족하는 현대적인 데이터 그리드 화면을 간편하게 구축할 수 있으므로, 데이터 그리드가 필요하실 때 Wijmo를 통해 개발해보시기 바랍니다.
다음 포스팅에서는 FlexChart의 기본 기능에 대해 소개하도록 하겠습니다.
다음 시리즈 글도 기대해주세요!
지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
