ax5ui-grid 활용하기 - 01

Grid 관련 글

ax5ui-grid 활용하기 - 01

ax5ui-grid 활용하기 - 02

ax5ui-binder 활용하기 - 01

---

 

 

ax5ui-grid를 사용하여 간단한 그리드 테이블을 그리는 것을 연습해 볼까 합니다.

 

1. ax5ui란?

 

ax5ui라는 자주 사용되는 여러가지 웹 상의 기능들을 손쉽게 구현이 가능하도록 도와주는 오픈 소스입니다.

 

https://ax5.io/

ax5ui : home

2. ax5ui-grid 사용해보기

 

2_1. html head 부분 추가하기

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.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>

기본적으로 head에 포함되어야 하는 css와 javascript입니다. 다만 앞으로도 여러가지를 동시에 사용하려면 간단하게 모든 css와 javascript가 포함되어 있는 것들로 추가시켜주어도 됩니다.

 

<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/ax5core/master/dist/ax5core.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-kernel/master/dist/ax5ui.all.min.js"></script>

위와 같이 포함시키면 앞으로 ax5ui의 다른 형태를 사용할 때도 굳이 일일이 포함시키지 않아도 됩니다.

 

2_2. body

 

<div id="grid01" data-ax5grid="first-grid" data-ax5grid-config="{}" style="width:60%; height:500px;float:left">

data-ax5grid 부분을 통해 javascript의 설정을 넣어줄 수 있습니다.

 

2_3. script

 

$(document).ready(function () {
			firstGrid = new ax5.ui.grid();

			firstGrid.setConfig({
				target: $('[data-ax5grid="first-grid"]'),
				showLineNumber: false,
				showRowSelector: true,
				multipleSelect: false,
				virtualScrollY: false,
				lineNumberColumnWidth: 40,
				rowSelectorColumnWidth: 27,

				columns: [
					{ key: "type", label: "분류코드", align: "center", width: 100 },
					{ key: "name", label: "분류코드명", align: "left", width: 300 },
					{ key: "explain", label: "설명", align: "left", width: 400 },
					{
						key: "use", label: "사용여부", align: "center",
						editor: {
							type: "select", config: {
								columnKeys: {
									optionText: "CD",
									optionValue: "TF"
								},
								options: [
									{ CD: "사용", TF: "사용" },
									{ CD: "미사용", TF: "미사용" }
								]
							},
							disabled: function () {
								return this.item.complete == "true";
							}
						}
					}
				],
				page: {
					navigationItemCount: 9,
					height: 30,
					display: true,
					firstIcon: '|<',
					prevIcon: '<',
					nextIcon: '>',
					lastIcon: '>|',
					onChange: function () {
						search(this.page.selectPage);
					}
				},
				header: {
					selector: false
				},
				body: {
					onClick: function () {
						console.log(this);
					},
					onDataChanged: function () {
						console.log(this);
					}
				}
			});
		});

 

간단한 기본틀만 작업을 해주었습니다.

columns를 통해서 테이블을 만들어줍니다.

page는 데이터가 일정량 이상 넘어갈 때 자동으로 페이지를 생성해주는 옵션입니다.

body 상에 onClick은 해당 row를 클릭 했을 때 발생하는 이벤트입니다.

onDataChanged는 grid의 데이터가 수정되었을 때 발생하는 이벤트입니다.

showLineNumber는 grid 의 해당 줄의 넘버가 표시되는 옵션입니다.

showRowSelector는 grid 의 체크박스를 생성해줍니다.

multipleSelect 체크박스를 멀티로 선택가능 여부 옵션입니다.

virtualScrollY은 스크롤 발생 시 스크롤이 아래로 내려갔을 때 이벤트 발생 후 자동으로 맨 위로 이동할지에 대한 옵션입니다.

 

3. 결과물