업무용 웹 프로그램에서 데이터를 표현하는데 테이블 형식을 많이 사용합니다.
초기 웹 프로그래밍에서는 지금도 많이 사용되는 게시판 프로그래밍처럼 데이터는 <table> 태그를 사용해서 보여주고, 내용의 입력 또는 수정 작업을 위해서는 다른 페이지로 이동하여 작업을 하는 형태를 사용했습니다. 이러한 형태는 화면전환이 계속 발생하게 됩니다.
다음으로 사용하던 형태는 테이블의 각 셀에 입력 필드(inut tag)를 사용해서 데이터를 보여주고, 입력/수정할 수도 있게 하고, 실제 데이터를 서버로 전송해서 처리하는 작업은 JavaScript를 이용해서 숨겨진 iframe을 통해 처리하는 방식을 사용했습니다. 화면 전환 없이 한 화면에서 모두 처리할 수 있었습니다.
업무용 C/S 프로그램들이 웹프로그램으로 점점 더 많이 전환되기 시작하자 RIA(Rich Internet Application)이라는 개념이 생기고 관련 솔루션들이 나오기 시작했습니다. RIA 는 웹 환경에서 데스크톱 환경처럼 프로그램을 사용할 수 있도록 해주는 애플리케이션을 말합니다.
어도비 플렉스(Adobe Flex), 마이크로소프트 실버라이트(Silverlight) 가 대표적인 예이고, 이외에서 ActiveX 로 만들어진 그리드, HTML 에디터 또 순수한 JavaScript 로만 만들어진 그리드와 에디터들이 많이 나왔습니다. 또한 서버와의 데이터 통신은 Ajax 를 사용함으로써 웹 환경이지만 기존의 C/S 환경 못지 않은 UI와 사용성을 가지는 프로그램을 만들 수가 있었습니다.
현재 시점에서 보안문제 및 크로스 브라우징 문제 등으로 ActiveX 기반의 프로그램보다는 거의 순수 자바스크립트 기반의 프로그램들이 대세가 되어 가고 있는것 같습니다.(어도비 플렉스는 아파치 플렉스(http://flex.apache.org)로 바껴서 아직도 나오고 있습니다.)
ax5ui-grid의 사용법을 알아보도록 하겠습니다. ax5ui-grid 는 jQuery 1.X + 와 ax5core가 필요합니다. 먼저 실행 결과 화면 입니다.
1. 필요한 스크립트와 스타일시트
그리드 컴포넌트 자바스크립트 파일과 jQuery, 그리드 스타일 시트 파일을 페이지에 포함 시킵니다. 다음 스크립트와 스타일 시트를 페이지 <head> 내에 작성하면되겠습니다. 그리드만 사용할 경우 입니다.
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.min.js"></script>
ax5ui 컴포넌트를 모두 사용할 계획이라면 다음처럼 사용하는게 나을 것으로 보입니다.
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-kernel/master/dist/ax5ui.all.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-kernel/master/dist/ax5ui.all.min.js"></script>
2. 그리드가 그려질 태그
이제 그리드가 그려질 곳을 지정하는 태그를 작성합니다. 아래 코드를 <body> 태그내에 작성합니다.
<div data-ax5grid="first-grid" data-ax5grid-config="{}" style="width:100%; height:300px;"></div>
data-ax5grid 속성은 그리드가 그려질 태그를 나타내는데 사용됩니다. 속성값인 "first-grid" 는 그리드를 구분하는데 사용됩니다. 한 페이지내에 여러개의 그리드가 그려질 때 그것을 구분합니다. 즉, 값이 페이지내에서 유일해야 할 것 같습니다. 같은 값을 가지는 <div> 를 하나 더 넣어보니까, 그리드 두개가 그려지기는 하는데 정상적으로 동작하지는 않았습니다. (그냥 표준 id 속성을 사용하는게 어땠을까 생각해 봅니다.)
data-ax5grid-config 속성은 그리드의 모양, 동작 방식 등 설정 값들을 넣을 수 있는 속성입니다. 이 설정값들은 자바스크립트로 그리드 생성시에 지정할 수도 있으므로, 어디에서 사용할지는 선택사항입니다. 이 글에서는 자바스크립트로 지정하는 방식을 사용하여 테스트 합니다.
style 속성은 HTML 표준 인라인 스타일 속성 입니다. 주로 그리드의 width 와 height를 지정하는데 사용되어질 것으로 보입니다. width 값은 지정하지 않으면 100%로 동작합니다. height의 경우는 100%로 주면 동작하지 않았습니다. 값을 지정해서 사용해야할것 같습니다.(뭔가 refresh라던가 render 라던가 해줘서 100% 높이가 제대로 동작하게 하는 방법이 있을지 찾아보아야 할것 같습니다.) (height를 100%로 주고 브라우저 크기를 늘였다, 줄였다 해보면 그리드의 높이가 슬금슬금 길어지는 현상이 있었습니다.)
3. 그리드생성 스크립트
이제 그리드를 생성하는 자바스크립트를 추가 합니다. 다음 코드를 <head> 내에 작성합니다.
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
/* dash(-)로 구분되는 날짜 포맷터 */
ax5.ui.grid.formatter["date"] = function() {
var date = this.value;
if(date.length == 8) {
return date.substr(0, 4) + "-" + date.substr(4, 2) + "-" + date.substr(6);
} else {
return date;
}
}
/* 그리드 객체 생성 */
var firstGrid = new ax5.ui.grid();
/* 그리드 설정 지정 */
firstGrid.setConfig({
target: $('[data-ax5grid="first-grid"]'),
showLineNumber: false,
showRowSelector: true,
multipleSelect: false,
lineNumberColumnWidth: 40,
rowSelectorColumnWidth: 27,
columns: [
{key: "date", label: "날짜", formatter: "date", align: "center"},
{key: "type", label: "구분", align: "center"},
{key: "amount", label: "<strong>주유량</strong>", align: "center"},
{key: "mileage", label: "주행거리(km)", align: "center"},
{key: "price", label: "금액(원)", formatter: "money", align: "center"},
{key: "repair", label: "정비내역", align: "center"},
{key: "note", label: "비고", align: "center"}
]
});
/* 테스트용 데이터 생성 */
var list = [];
for (var i = 0; i < 50; i++) {
list.push({date: "20170101", type: "주유", amount: 25, mileage: (i + 1) * 100, price: 45000, repair: "-", note: "-"});
}
/* 그리드에 데이터 설정 */
firstGrid.setData(list);
});
//]]>
</script>
그리드 객체를 생성하는 코드 입니다. firstGrid 변수로 그리드 객체를 참조 합니다.
var firstGrid = new ax5.ui.grid();
생성된 그리드 객메의 setConfig() 메소드를 사용해서 그리드의 각종 설정을 지정합니다.
firstGrid.setConfig({ /* 설정정보 객체 */ });
setConfig() 메소드에 인자로 제공되는 설정 객체에 대해서 알아 봅니다.
- target 속성 : 그리드가 그려질 jQuery 객체를 지정합니다. data-ax5grid 속성의 값이 "first-grid" 인 요소를 선택합니다.
target: $('[data-ax5grid="first-grid"]')
- showLineNumber 속성 : 그리드에 라인번호를 보여주는 열(column)을 보여줄지, 말지를 boolean 값으로 나타냅니다.
showLineNumber: false // 라인번호를 보여주지 않습니다.
- showRowSelector 속성 : 그리드에 행을 선택하는 의미를 가진 체크박스를 보여줄기, 말지를 지정합니다.
showRowSelector: true // 행을 선택하는 체크박스 열을 보여줍니다.
- multipleSelect 속성 : 행선택 체크박스를 통해 한번에 여러개의 행이 선택할 수 있는지 지정합니다. false 로 지정했을 경우 마우스 클릭으로 선택하면 한번에 하나만 선택되는데, 헤더에 있는 전체 선택을 누르면 전체가 선택되어 버렸습니다. false 일 경우 헤더의 전체선택을 없애는 방법을 찾아봐야 겠습니다.
multipleSelect: false // 한번에 하나의 행만을 선택할 수 있습니다.
- lineNumberColumnWidth 속성 : 행번호 컬럼의 너비를 지정합니다.
lineNumberColumnWidth: 40
- rowSelectorColumnWidth 속성 : 행선택 체크박스 열의 너비를 지정합니다.(이 값을 늘리니까, 체크박스의 너비도 같이 늘어 났습니다.)
rowSelectorColumnWidth: 27
- columns 속성 : 그리드의 각 열에 대해 헤더정보, 데이터 표시형식, 정렬 등을 지정합니다.(열정보를 담은 객체의 배열 입니다.)
columns: [
{key: "date", label: "날짜", formatter: "date", align: "center"},
{key: "amount", label: "<strong>주유량</strong>", align: "center"},
{key: "price", label: "금액(원)", formatter: "money", align: "center"}
]
* key : 각 컬럼을 나타내는 키값입니다. 이 키 값으로 행내의 데이터를 찾을 수 있을 것으로 보입니다.
* label : 헤더에 표시되는 정보입니다. HTML을 사용하는 것이 가능합니다.
* formatter : 데이터가 실제 보여지는 모양을 지정할 수 있습니다. 그리드가 내부에 유지하고 있는 데이터의 포맷과 보여지는 포맷을 다르게 할 수 있습니다. 기본적으로 제공되는 formatter 는 money 밖에 없는 것 같습니다. 다음과 같은 방식으로 포맷터를 추가할 수 있습니다.
/* dash(-)로 구분되는 날짜 포맷터 */
ax5.ui.grid.formatter["date"] = function() {
var date = this.value;
if(date.length == 8) {
return date.substr(0, 4) + "-" + date.substr(4, 2) + "-" + date.substr(6);
} else {
return date;
}
}
* align : 컬럼 데이터의 정렬 방식을 지정합니다. 현재 코드에서 align을 지정하면 그 열의 헤더와 데이터에 동일하지 정렬방식이 지정되어 버립니다. 헤더와 데이터 부분을 별도로 지정하는 방식이 있는지 찾아봐야 겠습니다.
4. 기타
셀들의 내용을 드래그 해서 선택한 후 복사(Ctrl + c)하면 탭으로 분리된 데이터로 복사 되어집니다. 붙여넣기한 결과는 다음과 같습니다.
20170101 주유 25 400 45000
20170101 주유 25 500 45000
20170101 주유 25 600 45000
※ 참고
자바스크립트에서 {} 는 객체이고, [] 는 배열 입니다. 다음 각각은 동일한 표현 입니다.
/* 객체 생성 */
var obj = {};
var obj = new Object();
/* 배열 생성 */
var array = [];
var array = new Array();
※ 전체 소스 코드
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| AX5UI - GRID 3 (Row 와 Column 다루기) (0) | 2018.04.04 |
|---|---|
| AX5UI - GRID 2 (설정 상세) (0) | 2018.04.04 |
| AX5UI - 소개(JavaScript UI Component) (0) | 2018.04.03 |
| jQuery Validation Plugin 사용하기 (0) | 2018.04.03 |
| jQuery로 요소의 값처리 및 상태변경 (0) | 2018.04.03 |