jqGrid 기본 - XML 버전

공식 사이트? 공식 블로그? : http://www.trirand.com/

데모페이지 : http://trirand.com/blog/jqgrid/jqgrid.html

데이터는 xml와 json으로 불러올 수 있는데 느린 외부 서버를 가지고 테스트해본 결과 

json보다 xml이 약간 더 속도가 빨라서 xml을 쓰고 있다.

인클루드할 파일들은 다음과 같다. 순서는 지켜져야 한다.

<link rel="stylesheet" type="text/css" media="screen" href="/AMES/js/jquery/css/custom-theme/jquery-ui-1.8.21.custom.css" /> <!-- jquery UI -->

<link rel="stylesheet" type="text/css" media="screen" href="/AMES/js/jquery.jqGrid/css/ui.jqgrid.css" /> <!-- jqGrid -->

<script src="/AMES/js/jquery/js/jquery-1.7.2.min.js" type="text/javascript"></script> <!-- jquery -->

<script src="/AMES/js/jquery/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script> <!-- jquery UI -->

<script src="/AMES/js/jquery.jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script> <!-- jqGrid -->

<script src="/AMES/js/jquery.jqGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script> <!-- jqGrid 언어셋 -->

xml 양식은 다음과 같다.

<rows>

<page>현재페이지번호</page>

<total>페이징을 위한 총 페이지 수(계산해서 넘겨줘야 한다.)</total>

<records>총 row수</records>

<row id="row를 유니크하게 표현할 수 있는 값. 애매하면 row 번호로 정도로 해도 된다. 단순 출력이면 id는 없어도 된다. ">

<cell>값1</cell>

<cell>값2</cell>

<cell>값3</cell>

</row>

</rows>

화면단은 다음과 같다.

<table id="tblist1"></table> <!-- 그리드가 그려짐 -->

<div id="pager"></div> <!-- 페이징 자리 -->

기본 스크립트는 다음과 같다.

$('#tblist1').jqGrid({

caption: '그리드 이름. 출력된다',

datatype: "xml", // or json

autowidth: true, // true면 알아서 화면 꽉 차게. false면 width 속성으로 grid 가로 사이즈를 지정할 수 있다.

height: 250, // 그리드 높이

shrinkToFit: false, // 컬럼이 그리드 width에 맞춰 자동으로 맞춰질지 여부

scrollOffset: 0,

rownumbers:true, // 줄번호 표시 여부

altRows:true, // title 태그처럼 값이 커서 옆에 표시는 것 여부

colNames:['값1', '값2', '값3'], // 그리드에서 그려질 컬럼 이름

colModel:[

{name:'값1',index:'VALUE1', width:90}, // name은 모르겠고 index는 해당 그리드 값 뽑아서 쓸때 필요하다.

{name:'값2',index:'VALUE2', width:100, align:'right', formatter:'currency', formatoptions:{decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 0, defaultValue: 0, prefix: "$ "}},

// 정렬도 되고 자동으로 , 도 찍어 줄 수 있으며 prefix 도 가능하다.

{name:'값3',index:'VALUE3', width:0, hidden: true} // hidden도 가능하다.

],

loadonce : false, // 페이징을 할거면 false가 낫고 고정된 값이라면 true로 해서 한번만 불러온 값으로 출력하는 것이 효율적이다.

hidegrid : false,

                multiselect : true, // 여러 줄 선택할 수 있다. 이 값은 $("#tblist1").jqGrid('getGridParam','selarrrow'); 이렇게 가져올 수 있는데 배열이다.

sortname: 'VALUE1 DESC, VALUE2', // 정렬할 컬럼명인데 단독 컬렴명도 되지만 좌측처럼 여러 값을 넣어도 된다. 이 값은 sidx 라는 이름으로 파라미터가 넘어간다.

sortorder: 'ASC', // 정렬방식. 파라미터 명은 sord 이다.

pager : '#pager', // 화면단에 페이징 자리 이름이다.

rowNum : 200, // 한 화면에 기본 row수.  

rowList:[50,100,150,200,250,300], // 한 화면의 row를 select 박스로 선택할 수 있게 해준다.

viewrecords : true,

recordpos: "left",

showpage:true, // 페이징 true

gridview : true, // 처리속도를 빨리해주나 treeGrid, subGrid, afterInsertRow(event)에는 사용할 수 없다.

emptyrecords: '데이터가 존재하지 않습니다.', // 데이터가 없을때 출력될 메시지. 페이징 자리에 출력되서 눈에 그다지 띄지는 않는다.

afterInsertRow: function(rowid, rowdata, rowelem) { // 데이터를 로드할때의 액션

var STATUS = rowdata.STATUS;

var color=null;

if(STATUS=="Ready") color = "#ff8c00";

else if(STATUS=="Started") color = "#ffa500";

$('#tblist1').setCell(rowid, 'STATUS', STATUS, { background: color }); // 이런식으로 특정 컬림이 특정 값일때 색상을 바꿔줄 수도 있다.

},

onSelectRow: function(id) { // row를 선택했을때 액션. id는 xml의 id다.

var ret = $("#tblist1").jqGrid('getRowData',id); // ret는 선택한 row 값을 쥐고있는 객체다.

var value1 = ret.VALUE1; // 이런식으로 값을 가져올 수 있다. 

}

});

// 컬럼명 하단에 컬럼마다 input창이 붙어서 inline 검색을 할 수 있는 폼으로 만들어준다.

$("#tblist1").filterToolbar({

stringResult: true,

groupOp: 'AND',

searchOnEnter: true,

beforeSearch: function() { //  검색전 액션이다.

$("#tblist1").setGridParam({url:"xml/data_xml.jsp?"}); // 데이터 xml 주소를 지정할 수 있다.

}

}); 

// 컬럼그룹을 만들어 두 줄로 표시할 수 있다.

$("#tblist1").jqGrid('setGroupHeaders', {

useColSpanStyle: true, 

groupHeaders:[ 

{startColumnName: '값1', numberOfColumns: 2, titleText: 'COL GROUP'}

// startColumnName은 'colNames'에 표시한 컬럼명

// numberOfColumns은 시작한 컬럼을 포함해서 묶을 연속하는 컬럼수

// titleText 컬럼그룹명. 화면에 출력된다.

]});

마지막으로 인라인 검색시 넘어오는 데이터는 json형식의 파라미터로 다음과 같다.

{\"groupOp\":\"AND\",\"rules\":[{\"field\":\"VALUE1\",\"op\":\"bw\",\"data\":\"검색텍스트1\"},{\"field\":\"VALUE2\",\"op\":\"bw\",\"data\":\"검색텍스트2\"}]}

트리 그리드는 추후에.