- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
Javascript & JavaScript Application [jQueryUI] jqGrid 사용하기 - 2
2016.08.28 18:17
[jQueryUI] jqGrid 사용하기 - 2
jquery grid 플러그인 jqGrid를 사용하는 방법과 jquery-ui의 custom theme을 입히는 방법을 알아보자
1. jqGrid 이해
- jQuery Grid Plugin 이다
- Open Source, MIT License 이다. 즉, 상업적인 용도로 사용해도 된다
2. 테스트 환경 만들기
- Angular + Express 프레임워크를 Node.js 기반으로 테스트 할 것이다 (방법-3 Yeoman Generator FullStack 사용 통합)
// angular + express 프레임워크 기반의 코드를 만든다
$ mkdir jqgrid && cd jqgrid
$ sudo npm install -g generator-angular-fullstack
$ yo angular-fullstack jqGridApp
// localhost:9000 포트의 크롬 브라우져가 자동으로 수행된다
$ grunt server
// 디렉토리 구조
- app : Angular.js SPA 폴더
- lib : Express.js 서버 폴더
- public : app의 minification 배포 폴더 (grunt build시 자동 생성됨)
- 기타 : grunt, bower, yo, karma 설정 파일들
3. jqGrid 설정하기
- 먼저 jqGrid 를 다운로드 한다 (bower install jqgrid 로 설치할 수 있으나 이상하게 에러 발생하여 직접 다운로드 설치 사용함)
- 다운로드한 파일은 app/bower_components/jqgrid 폴더로 풀어 놓는다
+ css 는 jquery-ui의 ThemeRoller에서 선택한 css를 적용하면 jqGrid의 theme 이 변경된다
+ jquery-migrate를 반드시 설정한다 $.browser.msie 체크 기능은 jquery 1.4*버전에만 존재하여 최신버전에 없어졌다
+ jquery-ui.js 를 설정하고 언어패키지와 jqGrid.js를 최종 설정하게 된다
// app/index.html 내역 추가
// css 영역 파란색 추가
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="bower_components/jqgrid/css/ui.jqgrid.css">
<!-- endbuild -->
// js 영역 파란색 추가
<script src="bower_components/jquery/jquery.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<!-- The JQuery UI code -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="bower_components/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="bower_components/jqgrid/js/jquery.jqGrid.min.js"></script>
- app/view/main.html 수정
// 기존코드 주석처리
<!--div class="hero-unit">
<h1>'Allo, 'Allo!</h1>
<p>You now have</p>
<ul>
<li ng-repeat="thing in awesomeThings">{{thing}}</li>
</ul>
<p>installed.</p>
<h3>Enjoy coding! - Yeoman</h3>
</div-->
// jqGrid 표현 태그 추가
<table id="Grid"></table>
<div id="GridPager"></div>
// jqGrid 자바스크립트 코드 추가
<script>
... 중략 ...
</script>
- jqGrid 자바스크립트 코드 내역
// 데이터와 변수 설정
var gidData = [
{ id: "1", orderdate: "2013-10-01", customer: "customer", price: "200.00", vat: "10.00", completed: true, shipment: "TN", total: "210.00"},
{ id: "2", orderdate: "2013-10-01", customer: "customer2", price: "300.00", vat: "20.00", completed: false, shipment: "FE", total: "320.00"},
{ id: "3", orderdate: "2011-07-30", customer: "customer3", price: "400.00", vat: "30.00", completed: false, shipment: "FE", total: "430.00"},
{ id: "4", orderdate: "2013-10-04", customer: "customer4", price: "200.00", vat: "10.00", completed: true, shipment: "TN", total: "210.00"},
{ id: "5", orderdate: "2013-11-31", customer: "customer5", price: "300.00", vat: "20.00", completed: false, shipment: "FE", total: "320.00"},
{ id: "6", orderdate: "2013-09-06", customer: "customer6", price: "400.00", vat: "30.00", completed: false, shipment: "FE", total: "430.00"},
{ id: "7", orderdate: "2011-08-30", customer: "customer7", price: "200.00", vat: "10.00", completed: true, shipment: "TN", total: "210.00"},
{ id: "8", orderdate: "2013-10-03", customer: "customer8", price: "300.00", vat: "20.00", completed: false, shipment: "FE", total: "320.00"},
{ id: "9", orderdate: "2013-09-01", customer: "customer9", price: "400.00", vat: "30.00", completed: false, shipment: "TN", total: "430.00"},
{ id: "10", orderdate: "2013-09-08", customer: "customer10", price: "702.00", vat: "30.00", completed: true, shipment: "IN", total: "530.00"},
{ id: "11", orderdate: "2013-09-08", customer: "customer11", price: "500.00", vat: "30.00", completed: false, shipment: "FE", total: "530.00"},
{ id: "12", orderdate: "2013-09-10", customer: "customer12", price: "500.00", vat: "30.00", completed: false, shipment: "FE", total: "530.00"}
],
theGrid = $("#Grid"),
numberTemplate = {formatter: 'number', align: 'right', sorttype: 'number'};
// jqGrid 옵션 설정
theGrid.jqGrid({
datatype: 'local',
data: gidData,
colNames: ['Customer', 'Date', 'Price', 'VAT', 'Total', 'Completed', 'Shipment'],
colModel: [
{name: 'customer', index: 'customer', width: 90, editable:true},
{name: 'orderdate', index: 'orderdate', width: 100, align: 'center', sorttype: 'date',
formatter: 'date', datefmt: 'd-M-Y'},
{name: 'price', index: 'price', width: 55, template: numberTemplate},
{name: 'vat', index: 'vat', width: 42, template: numberTemplate},
{name: 'total', index: 'total', width: 50, template: numberTemplate},
{name: 'completed', index: 'completed', width: 30, align: 'center', formatter: 'checkbox',
edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
{name: 'shipment', index: 'shipment', width: 80, align: 'center', formatter: 'select',
edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intime;us:USPS', defaultValue: 'Intime'}}
],
autowidth: true,
gridview: true,
rownumbers: false,
rowNum: 10,
rowList: [5, 10, 15],
pager: '#GridPager',
sortname: 'Date',
sortorder: 'asc',
viewrecords: true,
caption: 'LG Solar Dashboard',
height: '100%',
width: 'auto',
gridComplete : function () {
var maxDate;
var rowIDs = jQuery("#Grid").jqGrid('getDataIDs');
for (var i = 0; i < rowIDs.length ; i++)
{
var rowID = rowIDs[i];
var row = jQuery('#Grid').jqGrid ('getRowData', rowID);
if(i==0)
{
maxDate = new Date(row.orderdate);
}
else
{
if(maxDate < new Date(row.orderdate))
{
maxDate = new Date(row.orderdate);
}
}
}
$("#maxDateField").val(maxDate);
}
});
// 수행
$ grunt server
<참조>
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
