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 언어셋 -->
<rows>
<page>현재페이지번호</page>
<total>페이징을 위한 총 페이지 수(계산해서 넘겨줘야 한다.)</total>
<records>총 row수</records>
<row id="row를 유니크하게 표현할 수 있는 값. 애매하면 row 번호로 정도로 해도 된다. 단순 출력이면 id는 없어도 된다. ">
<cell>값1</cell>
<cell>값2</cell>
<cell>값3</cell>
</row>
</rows>
화면단은 다음과 같다.
$('#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 컬럼그룹명. 화면에 출력된다.
]});
{\"groupOp\":\"AND\",\"rules\":[{\"field\":\"VALUE1\",\"op\":\"bw\",\"data\":\"검색텍스트1\"},{\"field\":\"VALUE2\",\"op\":\"bw\",\"data\":\"검색텍스트2\"}]}
트리 그리드는 추후에.
