https://www.auisoft.net/demo/auigrid/index.html
HTML5 자바스크립트 그리드 AUIGrid
HTML5 자바스크립트 그리드(javascript grid) - AUIGrid
www.auisoft.net
설치
1. 위의 링크에서 Free 버전 다운로드 버튼 클릭
2. grid를 선택하고 나머지 정보 입력
회사명, 이름, 이메일이 중요하지는 않습니다.
다 작성하고 확인을 누르면 파일이 다운로드 됩니다.
3. 필요한 파일만 프로젝트의 webapp > resources 밑(또는 라이브러리 파일을 관리하는 하위 폴더)에 넣어줍니다.
AUIGrid : 기본 gird 생성 js파일, 이미지, css 파일
export_server_samples : PDF & Excel Download 를 위해 필요한 소스파일 (jsp)
pdfkit : PDF 다운로드를 위해 필요한 JS 파일
samples : 샘플로 사용할 DATA가 들어있습니다. (샘플 데이터가 필요없다면 samples 폴더는 복사 할 필요 없습니다.)
사용
1. script, css 불러오기 + 기본div추가
html 파일에 다음과 같이 추가 시켜줍니다.
body에는 그리드를 불러올 div를 생성해줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script type="text/javascript" src="../AUIGrid/AUIGridLicense.js"/>
<script type="text/javascript" src="../AUIGrid/AUIGrid.js"/>
<script type="text/javascript" src="./ajax.js"></script>
<link href="./style/AUIGrid_style.css" rel="stylesheet"/>
</head>
<body>
<div id="grid_wrap" style="width:800px;height:480px;"></div>
</body>
</html>
*requirJS에서 불러오기
css만 html에 추가하고 아래와 같이 들고 올 수 있습니다.
'use strict';
requirejs.config({
// 모듈의 기본 위치 지정
baseUrl:'../resources/js',
// 모듈의 단축 경로 지정
paths:{
//auigrid
'auigrid' : '../lib/auigrid/AUIGrid/AUIGrid',
'auigrid-license' : '../lib/auigrid/AUIGrid/AUIGridLicense'
//...
}
window.name = "NG_DEFER_BOOTSTRAP!";
function safeApply(scope,fn) {
var phase = scope.$root.$$phase;
if(phase == '$apply' || phase == '$digest') {
if(fn && (typeof(fn) === 'function')) {
fn();
}
} else {
scope.$apply(fn);
}
};
//requireJS를 활용하여 모듈 로드
require([
'text', //미리 선언해둔 path, css나 html을 로드하기 위한 requireJS 플러그인
'constants',
'jquery', //미리 선언해둔 path, jQuery는 AMD를 지원하기 때문에 이렇게 로드해도 jQuery 또는 $로 호출할 수 있다.
'jquery-ui'
], function(text, $, jquery) {
});"use strict";
define([
"auigrid",
"auigrid-license",
], function () {};
2. 칼럼레이아웃 작성 + 그리드 생성 + 데이터 요청
create() 함수로 실제로 앞서 작성한 Div 에 그리드를 출력하게 합니다
var columnLayout = [ {
dataField : "name",
headerText : "Name",
width : 140
}, {
dataField : "country",
headerText : "Country",
width : 120
}, {
dataField : "product",
headerText : "Product",
width: 120
}
];
let myGridID = AUIGrid.create("#grid_wrap", columnLayout);
// ajax 요청 전 그리드에 로더 표시
AUIGrid.showAjaxLoader(myGridID);
$.ajax({
url: "../resources/lib/auigrid/samples/data/normal_100.json",
error: function (xhr, status) {
alert("데이터 요청에 실패하였습니다.\r status : " + status);
},
success: function (data) {
// 그리드 데이터
var gridData = data;
// 로더 제거
AUIGrid.removeAjaxLoader(myGridID);
// 그리드에 데이터 세팅
AUIGrid.setGridData(myGridID, gridData);
},
});
실제 그리드가 화면에 생성된 모습입니다.
3. 그리드 추가 설정
gridProps로 추가 속성을 설정합니다.
var myGridID = AUIGrid.create("#myDiv", columnLayout, gridProps);
*참고
https://www.auisoft.net/documentation/auigrid/Desc/quick-start.html
'gridLib > auiGrid' 카테고리의 다른 글
| jqGrid auiGrid 함수 비교 (0) | 2023.05.24 |
|---|