본문 바로가기
프로그래밍/자바스크립트

AX5UI - GRID 1 (기본 사용법)

by pentode 2018. 4. 3.
반응형

업무용 웹 프로그램에서 데이터를 표현하는데 테이블 형식을 많이 사용합니다.

 

초기 웹 프로그래밍에서는 지금도 많이 사용되는 게시판 프로그래밍처럼 데이터는 <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가 필요합니다. 먼저 실행 결과 화면 입니다.

 

AX5UI 그리드 실행화면

 

 

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();

  

※ 전체 소스 코드

grid_basic.zip
다운로드

 

반응형

댓글2